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



/* -----[ Digital Signage ]--------------------------------------------------------------------- */

/*
		Do not change class names. Alter attributes as required.
*/

.InformationBarError {
	
/* padding: 1em; */
}

.InformationBarList h1,
.InformationBarEdit h1 {
    display: none;
}	

.InformationBarList p.Intro,
.InformationBarEdit p.Intro {
    /* margin-bottom: 20px; */
    /* font-size: 21px; */
    /* line-height: inherit; */
    /* color: #333; */
    /* border: 0; */
    /* border-bottom: 1px solid #e5e5e5; */
    display: none;
 }		

.InformationBarList a,
.InformationBarEdit a {
	display: inline-block;
	padding: .5em 1em;
	border: 1px #ccc solid;
	text-decoration: none;
}

input.InformationBarList{margin-right:5px}

.InformationBarList {
	margin: 0 0;
	padding: 60px 0 0 0;
}

	.InformationBarList h1 {
		float: left;
	}
	a.NewLink {
		display: inline-block;
		padding: 10px 29px;
		border: 0;
		background: #1e6eb5;
		border-radius: 2px;
		color: #ffffff;
		text-decoration: none;
		font-size: 14px;
		font-weight: 600;
		min-width: 125px;
		float: right;
		clear: both;
		margin: -60px 40px 1em 0;
	}
	a.NewLink:before {
	   font-family: "Font Awesome 5 Free";
	   content: "\f067";
	   margin: 0 0.5em 0 0;
	   font-weight: bold;
	}
		@media (max-width: 670px) {
	/* I've added 'body' to these css definitions so that they override the styles in BlogPro.css and EventsCalendar.css */
	body a.NewLink {
		   float: none;
		   margin: 0;
		   padding: 0;
		   position: fixed;
		   bottom: 2px;
		   right: 2px;
		   z-index: 50;
		   color: transparent;
		   width: 65px;
		   height: 65px;
		   min-width: auto;
		   border-radius: 50%;
		   font-size: 0;
	}
	body a.NewLink:before{
		color: #ffffff;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		font-size: 30px;
		width: 43px;
		height: 43px;
		text-align: center;
	}
}

	
	.InformationBarList p.Intro {
		clear: both;
		/* width:70%; */
		display: none;
	}

	.InformationBarList ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.InformationBarList li {
		list-style: none;
		position:  relative;
		margin: 0 0 3px 0;
		padding: 10px 20px;
		border: 1px solid #e2e2e2;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
		background-color: #FFFFFF;
		min-height: 82px;
	}

	.InformationBarList li:last-child{
		border:none;
	}
		.InformationBarList li.Header{
		list-style: none;
		margin: 0;
		padding: 1em 0;
		border-bottom: 1px #ccc solid;
		border-top:0;
		display: none;
	}
	
	
		.InformationBarList li div {
			display: inline-block;
			float: left;


		}
		.InformationBarList li.Header div.Item    { width: 55%; }
		.InformationBarList li.Header div.Actions { width: 30%; text-align: center; }

		.InformationBarList li.HasImage div.Image {
			width: 60px;
			height:  60px;
			margin: 0 20px 0px 0;
			float: left;
			left: 0;
			border-radius: 50%;
			overflow: hidden;
			position:  relative;
			border: 1px solid #EFEFEF;
						}
		.InformationBarList li.HasImage div.Text  {
			 width: 60%;
}

		.InformationBarList li div.Text {
			font-weight: 700;
			font-size: 16px;
			margin: 0 180px 0 0;
}
		
		.InformationBarList li div.Publish      {
			width: 80%;color: #a0a0a0;/* position: absolute; */
			left: 0;
			float:  none;
			font-size:  12px;
}
		.InformationBarList li div.Edit         {position: absolute;right: 40px;top: 0;bottom: 0;margin: auto;height: 40px;}
		.InformationBarList li div.Delete       {width: auto;position:  absolute;right: 0;top: 0;bottom: 0;margin: auto;height: 40px;}

		.InformationBarList li:after {
		    content:'';
		    display:block;
		    clear: both;
		}


		.InformationBarList li img {
			width: 90%;
			height: auto;
			position:  absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}
		.InformationBarList li div.Edit a{
			display: block;
			text-align: center;
			background: #1e6eb5;
			color:#fff;
			border-radius:2px;
			padding: 10px 20px;
			margin-right: 0;
			border:0 !important;
			font-size: 14px;
			font-weight: 600;
			min-width: 140px;
		}
		.InformationBarList li div.Delete a {
			color:transparent;
			border:none;
			width: 40px;
		}
		.InformationBarList li div.Edit a:before {
			font-family: "Font Awesome 5 Free";
			content: "\f044";
			margin: 0 5px 0 0;
		}
		.InformationBarList li div.Delete a:before {
			font-family: "Font Awesome 5 Free";
			content: "\f2ed";
			margin: 0 5px 0 0;
			color:#a0a0a0;
			  -webkit-transition: all 0.2s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
          transition: all 0.2s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
		}
		.InformationBarList li div.Delete a:hover:before {
			color:#e1251b
		}

		 
		 	.InformationBarList li div.Title.Publish      {display:none;}
			.InformationBarList li div.Title.Actions      {display:none;}
			.InformationBarList li div.Title.Item      {text-transform:uppercase;  }
		


.InformationBarEdit  { max-width: 700px; }

	.InformationBarEdit .EnquiryLabelGroup {
		padding-bottom: 1em;
		position: relative;
		font-size:1.125em;
		 line-height:1;
		font-weight:normal;

	}
	.InformationBarEdit .EnquiryLabelGroup.PublishStart{
		width:50%;
		float:left;
		padding: 0 10px 0 0;
	}
	.InformationBarEdit .EnquiryLabelGroup.PublishEnd{
		width: 50%;
		float:left;
	}
	.InformationBarEdit .EnquiryLabelGroup.Recurring{
		clear:both
	}
	.InformationBarEdit .EnquiryLabelGroup table td{
		vertical-align:top;
	}
	.InformationBarEdit .EnquiryLabelGroup table input{
		margin: 4px 0 0px 0;
		position:relative;
		display:  inline-block;
		vertical-align:  middle;
	}
	.InformationBarEdit .EnquiryLabelGroup table label{
		margin: 8px 0 0 10px;
		position:relative;
		display: inline-block;
		cursor:  pointer;
		vertical-align:  middle;
	}
	.InformationBarEdit .EnquiryLabelGroup table input:checked + label{
		color: #333333;
	}
	.InformationBarEdit .EnquiryLabelGroup > label {
		display: inline-block;
		width: 100%;
		padding: 0 10px 0 0;
		left: 0;
		font-weight: 700;
		vertical-align: top;
		font-size: 16px;
		margin-bottom: 5px;
	}
		.InformationBarEdit .EnquiryLabelGroup > label span:first-child {
			vertical-align: top;
			color: #333;
			font-weight: 700;
		}
	.InformationBarEdit .EnquiryLabelGroup > label + div {
		margin-left: 0;
	}
	.InformationBarEdit .EnquiryLabelGroup.RemoveImageGroup > label {
		display: none;
	}	
	
	.InformationBarEdit .EnquiryLabelGroup img#CurrentImagePreview {
		height: 87px;
		opacity: 1;
		position: absolute;
		left: 100px;
		background: #ffffff;
	}
	.InformationBarEdit .EnquiryLabelGroup img#CurrentImagePreview.hidden {
		max-height: 0;
		opacity: 0;
		
		-webkit-transition: max-height 0.25s, opacity 0.25s;
		   -moz-transition: max-height 0.25s, opacity 0.25s;
		        transition: max-height 0.25s, opacity 0.25s;

		-webkit-transition-delay: 0.25s, 0s;
		   -moz-transition-delay: 0.25s, 0s;
		        transition-delay: 0.25s, 0s;
	}
	input[type=file]  {
	}
    .InformationBarEdit input[type=file]  { display: block; }
       .InformationBarEdit input[type=file] {
            display: block;
            max-width: 100%;
            background: url(/Templates/_images/Icon_ImageUpload.png) no-repeat;
            height: 87px;
            color: transparent;
        }

	
	.InformationBarEdit .EnquiryLabelGroup textarea {
		width: 100% !important;
		max-width: 700px;
		padding: 8px 12px;
		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;
	}
	.InformationBarEdit .EnquiryLabelGroup img#CurrentImagePreview.hidden + input[type=file] {
		margin-top: -1em;
	}

	.InformationBarEdit .EnquiryLabelGroup.RemoveImageGroup input[type=checkbox] {
		display: none;
	}
	
	
	.InformationBarEdit .EnquiryLabelGroup .DateTimeContainer {
		display: inline-block;
		vertical-align: top;
	}
		.InformationBarEdit .EnquiryLabelGroup .DateTimeContainer label {
			display: block;
			font-size: 0.85em;
			text-transform: uppercase;
			color: #666;
		}
		.InformationBarEdit .EnquiryLabelGroup .DateTimeContainer input {
    -webkit-appearance: none;
    background: #ffffff;
    background-size: 12px;
    width: 191px;
    padding: 10px 15px;
    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;
}
		.dateTag{
			line-height: 1.8;
		}
		.dateTag:before{
			font-family: "Font Awesome 5 Free";
		   content: "\f274";
		   font-weight:bold;
		   margin:0 5px 0 0;
		   color:#1e6eb5
		}
	

	.InformationBarEdit .EnquiryButton {
		margin-left: 0;
	}
		.InformationBarEdit .EnquiryLabelGroup.RemoveImageGroup a,
		.InformationBarEdit .EnquiryButton a {
			text-align: center;
			background: #1e6eb5;
			color: #fff;
			border-radius: 2px;
			padding: 10px 40px;
			min-width: 140px;
			margin-right: 0;
			border: 0 !important;
			font-size: 14px;
			font-weight: 600;
		}
		.InformationBarEdit .EnquiryButton a.SaveButton{
			
background: #55b84b;
		}
		.InformationBarEdit .EnquiryButton a.SaveButton:before {
			font-family: "Font Awesome 5 Free";
			content: "\f00c";
			font-weight: bold;
			margin: 0 0.5em 0 0;
		}

		.InformationBarEdit .EnquiryButton a.CancelButton{
			background: #e1251b;
		}
		.InformationBarEdit .EnquiryButton a.CancelButton:before {
    font-family: "Font Awesome 5 Free";
    content: "\f00d";
    margin: 0 0.5em 0 0;
    font-weight: bold;
		}
		.LogoutButton{margin-top:15px; }

	.stickyFooter{
		position:fixed;
		width:100%;
		height: 50px;
		z-index: 200;
		bottom: 0;
		background: #ffffff;
		padding: 5px 0 0 0 !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);
	}
	ul.CategoryCheckboxes,
ul.CategoryCheckboxes ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.CategoryCheckboxes,
		ul.CategoryCheckboxes ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		ul.CategoryCheckboxes{
			height: auto !important;
			background: #ffffff;
			border: 1px solid #E3E3E3;
			min-width: 360px;
			max-width: 100% !important;
			border-radius: 2px;
			padding: 1em;
		}
			ul.CategoryCheckboxes input {
				width: auto !important;
				margin: 0 0 5px 0;
				display: inline-block;
				vertical-align: middle;
			}
			ul.CategoryCheckboxes li > label {
				display: inline-block;
				padding: 0 0 0 25px;
			}
			
			ul.CategoryCheckboxes li {
				list-style: none;
				margin: .25em 0;
				padding: 0px 0 0 25px;
				display: none;
				position: relative;
			}
				ul.CategoryCheckboxes li li {
				}

			ul.CategoryCheckboxes > li,
			ul.CategoryCheckboxes ul.expanded > li {
				display: block;
			}

		ul.CategoryCheckboxes span.treeControl {
			position: absolute;
			top: 0px;
			left: 0;
			width: 20px;
			height: 20px;
			border-radius: 2px;
		}
			ul.CategoryCheckboxes span.treeControl.expand   { background: #005daa; }
			ul.CategoryCheckboxes span.treeControl.contract { background: #005daa; }

			ul.CategoryCheckboxes span.treeControl:before {
				position: absolute;
				top: 3px;
				left: 4px;
				width: 12px;
				line-height: 12px;
				text-align: center;
				font-size: 20px;
				color: white;
			}
			ul.CategoryCheckboxes span.treeControl.expand:before   { content: "+"; }
			ul.CategoryCheckboxes span.treeControl.contract:before { content: "-"; line-height: 10px; }

@media screen and (max-width: 670px) {
	
h1 {
	line-height:1;
}

	.InformationBarList {
		margin: 0;
	}

.InformationBarList p.Intro {
		width:100%;
		border-bottom: 1px #ccc solid;
	padding-bottom:30px;
	margin-bottom:0;
		
	}	
	
	.InformationBarList {
    	padding: 0;
    	overflow:  hidden;
 }
		.InformationBarList li div.Text {
			margin: 0;
		} 
 

	.InformationBarEdit { 
        padding: 0; }
	.InformationBarEdit .EnquiryLabelGroup > label {
        display: block;width: auto;position: relative;top: 0;padding:0.475em 0;text-align: left;
    }
	.InformationBarEdit .EnquiryLabelGroup > label + div,
	.InformationBarEdit .EnquiryButton {
		margin-left: 0;
		width: 100%;
	}
		
	.InformationBarList li.Header {
		display: none;
	}
	
		.InformationBarList li.Header {
		border-bottom: 1px #ccc solid;
	}
	
	.InformationBarList li {
		border-bottom: 1px #ccc solid;
		padding:10px 10px 10px 20px;
		border-top: none;
		border: none;
		width:  100%;
	}
	

	
	.InformationBarList li div {
		/* display: block; */
		/* float: none; */
		/* width : auto !important; */
	}
	
	.InformationBarList li div.Image {
		/* text-align: left; */
		dispay:inline-block;
	}
	.InformationBarList li img {
		/* max-width: 300px; */
		/* margin: 0 auto 1em auto; */
	}	
	
	.InformationBarList li div.Publish {
		/* font-size: 0.85em; */
		/* padding: 1em 0; */
		/* text-align: left; */
		/* color: #666; */
	    width: 65%;
	}
	
	.InformationBarList li div.Edit{
	    /* width: 50% !important; */
	    /* display: inline-block; */
	    /* float: left; */
	    left: 0;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	}
	.InformationBarList li div.Delete{
		height:100%;
		background: #ff0000;
		width: 100px;
		right: -100px;
	}
	.InformationBarList li div.Delete a:before{
		color:#ffffff;
		font-size:30px;
		text-align:center;
		width:100%;
		display:block;
		position:  absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		height: 50px;
	}
	.InformationBarList li div.Edit a,
	.InformationBarList li div.Delete a {
		height:100%;
		width: 100%;
	}
	
	a.NewLink{
		float: none;
		margin: 0;
		padding:0;
		position:  fixed;
		bottom: 2px;
		right: 2px;
		z-index: 50;
		color: transparent;
		width: 65px;
		height: 65px;
		min-width: auto;
		border-radius:50%;
		}
		a.NewLink:before{
			color:#ffffff;
			position:absolute;
			left:0;
			right:0;
			top: 0;
			bottom:0;
			margin:auto;
			font-size:30px;
			width: 43px;
			height: 43px;
			text-align: center;
		}
		
		.Logout{padding:0 1em }

		
		.InformationBarEdit .EnquiryLabelGroup.PublishStart,
		.InformationBarEdit .EnquiryLabelGroup.PublishEnd {
			width: 100%;
			float: none;
		}

		ul.CategoryCheckboxes {
			min-width: inherit;
			max-width: 100% !important;
		}
		
}


/* Automatically Updateded in patch version 2.6.2.0 */
/* -----[ Patch 2.6.3 ]----- */

.EnquiryLabelGroup.Locations .EnquiryError {
	margin-top: 0.5em;
}

/* Automatically Updateded in patch version 2.6.2.0 */
/* -----[ Patch 2.7.0 ]----- */



.WebViewContainer {
	position: relative;
	overflow: hidden;
}
body:not(.Contegro_ContentEditorBody) .WebViewContainer.FullScreen {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 5000;
}
body:not(.Contegro_ContentEditorBody) .WebViewContainer.FullScreen iframe ,
body:not(.Contegro_ContentEditorBody) .WebViewContainer.FullScreen #InformationBarContainer {
	z-index: 5000;
}


.WebViewContainer {
	transform-origin: 0% 0%; /* scale and keep the top left corner at the came point */
}
.WebViewContainer.FullScreen {
	transform-origin: 50% 50%; /* scale and keep the center at the same point */
}


.WebViewFullScreenShadow {
	position: fixed;
	display: block;
	content: '';
	top: 0;
	left: 0;
	z-index: 4090;
	width: 100%;
	height: 100%;
	background: black;
}
body.Contegro_ContentEditorBody .WebViewFullScreenShadow { display: none; }

	.WebViewContainer iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: none;
		overflow:hidden;
	}
	.WebViewContainer iframe.current {
		display: block;
	}
	.WebViewContainer iframe.animateSwipeLeft ,
	.WebViewContainer iframe.animateSwipeRight { transition: left 0.25s; }
	.WebViewContainer iframe.animateSwipeLeft  { left: -100%; }
	.WebViewContainer iframe.animateSwipeRight { left: 100%; }



	.WebViewContainer .overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 5020;
	}


	.WebViewContainer .ExitWebViewPanel {
		position: absolute;
		top: 0;
		right: 0;

		width: 146px;
		height: 125px;
		background: url('/data/__default__/Templates/_images/DigitalSignageWebView/close-buttons-and-background.png') 0 0 no-repeat;

		transition: top 0.25s;

		z-index: 5050;
	}
		.WebViewContainer .ExitWebViewPanel.hidden { top: -150px; }
		.contegro_mobile .WebViewContainer .ExitWebViewPanel { background: url('/data/__default__/Templates/_images/DigitalSignageWebView/mobile-close-buttons-and-background.png') 0 0 no-repeat; }


		.contegro_mobile .WebViewContainer .ExitWebViewPanel {
			width: 183px;
			height: 188px;
		}
		.contegro_mobile .WebViewContainer .ExitWebViewPanel.hidden { top: -185px; }

		.WebViewContainer .ExitWebViewPanel a {
			display: block;
			width: 100%;
			height: 100%;
			text-align: center;
			text-decoration: none;
			background: url('/data/__default__/Templates/_images/DigitalSignageWebView/close-buttons-and-background.png') 0 -150px no-repeat;
		}
		.contegro_mobile .WebViewContainer .ExitWebViewPanel a { background: url('/data/__default__/Templates/_images/DigitalSignageWebView/mobile-close-buttons-and-background.png') 0 -189px no-repeat; }
			.WebViewContainer .ExitWebViewPanel a span { display: none; }


	.WebViewContainer #touch-controls {
		font-size: 20px;
		height: 128px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		background: url('/Data/__default__/templates/_images/DigitalSignageWebView/Controller-BK.png') center center no-repeat; /* note: to use custom images, change this image path to your microsite's /templates/_images folder; */

		transition: bottom 0.25s;

		z-index: 5050;
	}

	.contegro_mobile .WebViewContainer #touch-controls {
		height: 192px;
		background: url('/Data/__default__/templates/_images/DigitalSignageWebView/mobile-Controller-BK.png') center center no-repeat; /* note: to use custom images, change this image path to your microsite's /templates/_images folder; */
	}

	.WebViewContainer #touch-controls.hidden {
		bottom: -130px !important;
	}
	.contegro_mobile .WebViewContainer #touch-controls.hidden {
		bottom: -200px !important;
	}
	.WebViewContainer.HideStopButton #touch-controls {
		background-image: url('/Data/__default__/templates/_images/DigitalSignageWebView/Controller-BK-NoStopButton.png'); /* note: to use custom images, change this image path to your microsite's /templates/_images folder; */
	}
	.contegro_mobile .WebViewContainer.HideStopButton #touch-controls {
		background-image: url('/Data/__default__/templates/_images/DigitalSignageWebView/mobile-Controller-BK-NoStopButton.png'); /* note: to use custom images, change this image path to your microsite's /templates/_images folder; */
	}


		.WebViewContainer #touch-controls a {
			margin-top: 18px;
			display: inline-block;
			width: 100px;
			height: 100px;
			line-height: 100px;
			position: relative;
			text-align: center;
			color: white;
			text-decoration: none;

			background-position: 0 0;
			background-repeat: no-repeat;
			background-image: url('/Data/__default__/templates/_images/DigitalSignageWebView/AllButtons.png'); /* note: to use custom images, change this image path to your microsite's /templates/_images folder; */
		}
		.contegro_mobile .WebViewContainer #touch-controls a {
			margin-top: 27px;
			width: 150px;
			height: 150px;
			line-height: 150px;
			background-image: url('/Data/__default__/templates/_images/DigitalSignageWebView/mobile-AllButtons.png'); /* note: to use custom images, change this image path to your microsite's /templates/_images folder; */
		}


		.WebViewContainer #touch-controls a#button-previous { background-position: 0    0px; transition: transform 0.2s; }
		.WebViewContainer #touch-controls a#button-pause    { background-position: 0 -200px; }
		.WebViewContainer #touch-controls a#button-play     { background-position: 0 -400px; }
		.WebViewContainer #touch-controls a#button-stop     { background-position: 0 -600px; }
		.WebViewContainer #touch-controls a#button-next     { background-position: 0 -800px; transition: transform 0.2s; }

		.contegro_mobile .WebViewContainer #touch-controls a#button-previous { background-position: 0     0px; }
		.contegro_mobile .WebViewContainer #touch-controls a#button-pause    { background-position: 0  -300px; }
		.contegro_mobile .WebViewContainer #touch-controls a#button-play     { background-position: 0  -600px; }
		.contegro_mobile .WebViewContainer #touch-controls a#button-stop     { background-position: 0  -900px; }
		.contegro_mobile .WebViewContainer #touch-controls a#button-next     { background-position: 0 -1200px; }

		.WebViewContainer.HideStopButton #touch-controls a#button-stop { display: none; }



		.WebViewContainer                            #touch-controls a#button-previous.highlight { transform: translateY(5px); transition: none; }
		.WebViewContainer[data-playpausestate=pause] #touch-controls a#button-pause              { background-position: 0 -300px; }
		.WebViewContainer[data-playpausestate=play]  #touch-controls a#button-play               { background-position: 0 -500px; }
		.WebViewContainer[data-playpausestate=stop]  #touch-controls a#button-stop               { background-position: 0 -700px; }
		.WebViewContainer                            #touch-controls a#button-next.highlight     { transform: translateY(5px); transition: none; }

		.contegro_mobile .WebViewContainer                            #touch-controls a#button-previous.highlight { transform: translateY(8px); }
		.contegro_mobile .WebViewContainer[data-playpausestate=pause] #touch-controls a#button-pause              { background-position: 0  -450px; }
		.contegro_mobile .WebViewContainer[data-playpausestate=play]  #touch-controls a#button-play               { background-position: 0  -750px; }
		.contegro_mobile .WebViewContainer[data-playpausestate=stop]  #touch-controls a#button-stop               { background-position: 0 -1050px; }
		.contegro_mobile .WebViewContainer                            #touch-controls a#button-next.highlight     { transform: translateY(8px); }


			.WebViewContainer #touch-controls a#button-pause svg.desktop-counter { width: 100px; height: 100px; }
			.WebViewContainer #touch-controls a#button-pause svg.mobile-counter  { width: 150px; height: 150px; display: none; }
			.WebViewContainer #touch-controls a#button-pause svg {
			  transform: rotate(-90deg) scaleY(-1);
			  opacity: 0.5;
			  position: relative;
			  top: 0px;
			  left: 0px;
			}

			.contegro_mobile .WebViewContainer #touch-controls a#button-pause svg.desktop-counter { display: none; }
			.contegro_mobile .WebViewContainer #touch-controls a#button-pause svg.mobile-counter  { display: inline-block; }

			.WebViewContainer[data-playpausestate=play] #touch-controls a#button-pause svg ,
			.WebViewContainer[data-playpausestate=stop] #touch-controls a#button-pause svg {
				opacity: 0;
			}

			.WebViewContainer                           #touch-controls a#button-pause svg.desktop-counter circle { stroke-width:  8px; stroke-dasharray: 258; /* 264 */ /* equal to circumference of circle 2 * 3.14 * 42 */ }
			.WebViewContainer                           #touch-controls a#button-pause svg.mobile-counter  circle { stroke-width: 12px; stroke-dasharray: 385; /* was 396 */ /* equal to circumference of circle 2 * 3.14 * 63 */ }

			.WebViewContainer                           #touch-controls a#button-pause svg circle {
				stroke: #E2DC22;
				fill: none;
				stroke-linecap: round;
				stroke-dashoffset: 0; /* initial setting */
			}
			.WebViewContainer[data-playpausestate=pause] #touch-controls a#button-pause svg.desktop-counter circle { stroke-dashoffset: 258; /* 264 */ }
			.WebViewContainer[data-playpausestate=pause] #touch-controls a#button-pause svg.mobile-counter  circle { stroke-dashoffset: 385; /* was 396 */ }


		#InformationBarContainer {
			position: absolute;

			bottom: -160px;
			height: 160px;

			left: 0;
			right: 0;
			overflow: hidden;
			background: white;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;


			font-family: open_sansregular, serif;
			font-size: 40px;

			padding: 0;

			-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
			   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
			        box-sizing: border-box;         /* Opera/IE 8+ */

			-webkit-transition: bottom 0.5s;
			        transition: bottom 0.5s;

			-webkit-transform: translate3d(0, 0, 0);
			   -moz-transform: translate3d(0, 0, 0);
			    -ms-transform: translate3d(0, 0, 0);
			        transform: translate3d(0, 0, 0);

			-webkit-backface-visibility: hidden;
			   -moz-backface-visibility: hidden;
			    -ms-backface-visibility: hidden;
			        backface-visibility: hidden;

			-webkit-perspective: 1000;
			   -moz-perspective: 1000;
			    -ms-perspective: 1000;
			        perspective: 1000;
		}
		body.showInformationBar #InformationBarContainer {
			bottom: 0 !important;
		}

			.InformationBarContent {
				opacity: 1;

				-webkit-transform: translate(0, 0);
				   -moz-transform: translate(0, 0);
				        transform: translate(0, 0);

				-webkit-transition: opacity 500ms, -webkit-transform 500ms;
				   -moz-transition: opacity 500ms,    -moz-transform 500ms;
				        transition: opacity 500ms,         transform 500ms;
			}
			.InformationBarContent.hidden {
				-webkit-transform: translate(0, 50px);
				   -moz-transform: translate(0, 50px);
				        transform: translate(0, 50px);

				opacity: 0;
			}
			.InformationBarContent.next {
				-webkit-transform: translate(0, -50px);
				   -moz-transform: translate(0, -50px);
				        transform: translate(0, -50px);

				-webkit-transition: none;
				   -moz-transition: none;
				        transition: none;

				opacity: 0;
			}


			#InformationBarTable {
				width: 0;
				height: 100%;
				float: left;
				display: none;
			}
			#InformationBarContainer.showImage #InformationBarTable {
				display: table;
			}

			#InformationBarContainer img {
				height: auto;
				width: auto;
				max-width: 100%;
				max-height: 100%;
				float: left;
			}
			#InformationBarContainer #InformationBarTextContainer {
				margin: -1em 0 0 0;
				white-space: nowrap;
				overflow: hidden;
				position: absolute;
				top: 50%;
				right: .5em;
				left: .5em;
				height: 2em;
				line-height: 2em;
			}
				#InformationBarContainer #InformationBarText {
					padding: 0;
					margin: 0;

					-webkit-transform: translate3d(0, 0, 0);
					   -moz-transform: translate3d(0, 0, 0);
					    -ms-transform: translate3d(0, 0, 0);
					        transform: translate3d(0, 0, 0);
				}
			#InformationBarContainer.showImage #InformationBarTextContainer {
				left: 1em;
			}


/* Automatically Updateded in patch version 2.7.0.0 */
/* -----[ Patch 2.7.1 ]----- */

.WebViewContainer iframe.current {
	display: block;
	z-index: 20;
}
.WebViewContainer iframe.next {
	display: block;
	z-index: 10;
}
/* Automatically Updateded in patch version 2.7.2.0 */
/* -----[ Patch 2.7.3 ]----- */

.WebViewContainer #touch-controls a#button-pause svg {
	opacity: 0.9;
}

.WebViewContainer                           #touch-controls a#button-pause svg.desktop-counter circle { stroke-width:  2px; stroke-dasharray: 232; }
.WebViewContainer                           #touch-controls a#button-pause svg.mobile-counter  circle { stroke-width:  3px; stroke-dasharray: 345; }

.WebViewContainer                           #touch-controls a#button-pause svg circle {
	stroke: #E4FFFF;
	fill: none;
	stroke-linecap: round;
	stroke-dashoffset: 0; /* initial setting */
}
.WebViewContainer[data-playpausestate=pause] #touch-controls a#button-pause svg.desktop-counter circle { stroke-dashoffset: 232; }
.WebViewContainer[data-playpausestate=pause] #touch-controls a#button-pause svg.mobile-counter  circle { stroke-dashoffset: 345; }



.InformationBarEdit .SelectClearAll {
	margin: 0 0 1em 0;
}
.InformationBarEdit .SelectClearAll a {
	font-size: 0.85em;
	margin: 0 0.5em 0 0;
	background: #666;
	color: white;
	border: none;
	text-transform: uppercase;
}





/* Automatically Updateded in patch version 2.7.2.0 */

	.DateTimeInputsContainer input[type=date],
	.DateTimeInputsContainer select {
		box-sizing: border-box;
		font-size: 12px;
		margin: 0.25em 0 0 0;
		display: inline-block;
		margin: 0.25em 0 0 0;
		border: 1px solid #e2e2e2;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
		border-radius: 2px;
		color: #565656;
	}
	.DateTimeInputsContainer input[type=date] {
		/* padding: 1px 0.25em; */
		width: 180px;
	}
	.DateTimeInputsContainer select {
		width: 100px;
	}	


	.DateTimeInputsContainer .PmCheckbox input { display: none; }
	.DateTimeInputsContainer .PmCheckbox label:before ,
	.DateTimeInputsContainer .PmCheckbox label:after {
		display: inline-block;
		background: #e4ebef;
		color: #a0a0a0;
		border-bottom: transparent 3px solid;
		padding: 13px 21px 9px;
		box-shadow: 0px 0 0 0px rgba(40, 40, 40, 0.1);
		font-weight: 600;
		font-size: 12px;
		transition:
			background-color 0.15s,
			color            0.15s,
			border-color     0.15s,
			box-shadow       0.15s;
	}
	.DateTimeInputsContainer .PmCheckbox label:before { content: 'AM'; }
	.DateTimeInputsContainer .PmCheckbox label:after  { content: 'PM'; }
	.DateTimeInputsContainer .PmCheckbox input:not(:checked) + label:before,
	.DateTimeInputsContainer .PmCheckbox input:checked + label:after {
		background: white;
		border-color: #333;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	}

.FileUploadContainer {
	display: block;
	position: relative;
	margin-top: 0.25em;
}
	.FileUploadContainer label {
		display: inline-block !important;
		width: 87px;
		height: 87px;
		background: url('/data/__default__/Templates/_images/digitalsignage-imageupload.png') 0 0 no-repeat;
		border-radius: 3px;
		position: relative;
		cursor:  pointer;
	}
	.FileUploadContainer.showThumbnail  label{
		background:#d6d6d6
	}

	.FileUploadContainer input[type=file] { display: none; }
	.FileUploadContainer input[type=file] + p {display:none }

	.FileUploadContainer .uploadProgress {
		opacity: 0;
		position: absolute;
		width: 0;
		top: 0;
		bottom: 0;
		left: 0;
		background: green;
		border-radius: 2px;
		transition: opacity 0.15s 1s;
		z-index: 10;
	}
		.FileUploadContainer.showProgress .uploadProgress {
			opacity: 0.5;
			transition: width 0.15s, opacity 0.15s 0.25s;
		}

	.FileUploadContainer .imagePreview { display: none; }
	.FileUploadContainer.showThumbnail .imagePreview {
		display: block;
		width: 87px;
		height: 87px;
		background-size: cover;
		background-position: center center;
		position: absolute;
		top: 0;
		left: 0;
		transition: opacity 0.5s;
		/* background-color: #d6d6d6; */
		/* border-radius: 2px; */
		cursor:  pointer;
		position:  relative;
	}
	.FileUploadContainer.showThumbnail .imagePreview:before{

	}
	.FileUploadContainer.showThumbnail .imagePreview:after{
		content:'';
		margin-left: 0;
		width:87px;
		height: 87px;
		display:block;
		background: url(/Templates/_images/Icon_ImageUpload.png) no-repeat;
		z-index: -1;
		position:  relative;
	}
	.FileUploadContainer.showThumbnail .deleteImage{
		position:absolute;
		background: #E1251A;
		width:27px;
		height:27px;
		bottom:0;
		right:0;
		background: url(/Templates/_images/Icon_ImageUploadPlus.png) no-repeat;
		cursor:pointer
	}
.TitleAndBackButton {
	background: #E1251A;
	color: white;
	padding: 1em;
}
	.TitleAndBackButton a,
	.TitleAndBackButton h1 {
		font-size: 1.5em;
		margin: 0;
		padding: 0;
		font-weight: normal;
		color: white;
	}
	.TitleAndBackButton a {
		float: left;
		display: inline-block;
		width: 1.5em;
		height: 1.5em;
		background: url('/data/__default__/Templates/_images/digitalsignage-back.png') center center no-repeat;
	}
		.TitleAndBackButton a span { display: none; }
	.TitleAndBackButton h1 {
		text-align: center;
	}

.PlaylistEditorToast {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	margin-bottom: -4em;
	padding: 1em 2em;
	background: #55B84B;
	color: white;
	box-shadow: 0 0 0.5em #666;
	z-index: 100;

	transition: margin-bottom 0.15s ease-in;
}
	.PlaylistEditorToast.show {
		margin-bottom: 0em;
		transition: margin-bottom 0.25s ease-out;
	}
.PlaylistEditor {}
.PlaylistEditor > p{
	display:block;
	background:#e1251b;
	color:#ffffff;
	padding:10px 20px;
}
.PlaylistEditor > p:before{
    font-family: "Font Awesome 5 Free";
    content: "\f071";
    font-weight:bold;
    margin: 0 0.5em;
}

	.PlaylistEditor a {
		text-decoration: none;
	}

	.PlaylistEditor ul ,
	.PlaylistEditor li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.PlaylistEditor ul {
		padding: 0;
	}

	.PlaylistEditor li {
		background: white;
		list-style: none;
		position: relative;
		margin: 0 0 3px 0;
		padding: 10px 20px;
		border: 1px solid #e2e2e2;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
		background-color: #FFFFFF;
	}


	.PlaylistEditor .Header {
		background: #333;
		text-align: center;
		padding: 12px;
	}
		.PlaylistEditor .Header h2 ,
		.PlaylistEditor .Header p {
			color: white;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		.PlaylistEditor .Header h2 {
			font-weight: 600;
			font-size: 20px;
			display:  inline-block;
		}
		.PlaylistEditor .Header p {
		display:  inline-block;
		font-size:  12px;
		margin:0 0 0 10px;
		}
		.PlaylistEditor .Header p:before{
		    font-family: "Font Awesome 5 Free";
			font-weight: 900;
			content: "\f017";
			margin: 0 5px 0 0;
			font-size: 12px;
		}

	.PlaylistEditor .Tabs {
		margin: 0 0 2em;
	}
	.PlaylistEditor .Tabs:after {
		content: "";
		display: table;
		clear: both;
	}
		.PlaylistEditor .Tabs a,
		.PlaylistEditor .Tabs a:hover {
			margin: 0 !important;
			display: block;
			float:left;
			padding: 8px 45px;
			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;
			min-width:125px;
			width: 50%;
			text-align: center;
		}
		.PlaylistEditor .Tabs a.current,
		.PlaylistEditor .Tabs a.current:hover {
			color: #555;
			border: 1px solid #ddd;
			background: white;
		}
			.PlaylistEditor .Tabs a.current:after {
				content: '';
				position: absolute;
				width: calc(100% + 2px);
				height: 3px;
				bottom: -1px;
				left: -1px;
				background: #444444;
			}		



.PlaylistEditor.ListView li a {
	display: block;
	color: #222;
}
.PlaylistEditor.ListView li a:hover {
	color: #222;
}

	.PlaylistEditor.ListView li span.PlaylistName {
		display: block;
		padding: 0;
		font-weight: 700;
		font-size: 16px;
	}
	.PlaylistEditor.ListView li span.PlaylistDuration {
		display: block;
		margin: 0;
		font-size: 12px;
		color: #a0a0a0;
	}
	.PlaylistEditor.ListView li a:after { /* fake an edit button */
		box-sizing: border-box;
		display: inline-block;
		content: "Edit";
		text-align: center;
		background: #1e6eb5;
		color: #fff;
		border-radius: 2px;
		padding: 10px 45px;
		min-width: 125px;
		margin-right: 0;
		border: 0 !important;
		font-size: 14px;
		position: absolute;
		top: 10px;
		right: 25px;
		font-weight: 600;
	}



.PlaylistEditor.EditView li {
	padding: 0;
	transition: opacity 0.75s;
	position: relative;
	overflow: hidden;
    font-weight: 700;
    font-size: 16px;	

   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;		
}
	.PlaylistEditor.EditView li.deleted {
		min-height: 0;
		height: 0;
		margin: 0 15px;
		opacity: 0;
		border-bottom: 0px #ccc solid;
		overflow: hidden;
		transition:
			min-height       0.15s 0.5s,
			margin           0.15s 0.5s,
			border-width    0.001s 0.65s,
			opacity           0.25s;
	}
	.PlaylistEditor.EditView li:not(.deleted) + li.deleted {
		margin-top: -15px;
	}
	.PlaylistEditor.EditView li.deleted:last-child {
		margin-bottom: 15px;
	}

	.PlaylistEditor.EditView li.ghost {
		opacity: 0.5;
		background: none;
		box-shadow: 0 0 20px #ccc inset;
		padding: 10px 25px;		
		transition: none;
	}
		.PlaylistEditor.EditView li.ghost span {
			display: none !important;
		}

	.PlaylistEditor.EditView li.drag {
	}
	.PlaylistEditor.EditView li.chosen {
	}
	.PlaylistEditor.EditView li.fallback {
		background: #E4E4E4;
		opacity: 1 !important;
		transition: none;
	}	

	.PlaylistEditor.EditView li .ListItemContents {
		padding: 10px 25px 10px 50px;
	}

	.PlaylistEditor.EditView li span {
		display: inline-block;
		max-width: 90%;
	}

	.PlaylistEditor.EditView span.DeleteSlide {
		float: right;
		display: inline-block;
		width: 1em;
		height: 1em;
		cursor: pointer;
		content: 'f00d';
	}
	.PlaylistEditor.EditView span.DeleteSlide:before{
		    font-family: "Font Awesome 5 Free";
			content: "\f00d";
			margin: 0 0 0 0;
			font-weight: bold;
			color:#a0a0a0;
	}
	.PlaylistEditor.EditView span.DeleteSlide:hover:before{
		color:#e1251b;
	}
	.PlaylistEditor.EditView li .SwipeToDeleteItem span.DeleteSlide {
		position: absolute;
		top: 0;
		padding: 11px 0;
		right: -100px;
		width: 100px;
		margin: 0;
	}
		.PlaylistEditor.EditView li .SwipeToDeleteItem span.DeleteSlide:hover {
		}

		.PlaylistEditor.EditView li .SwipeToDeleteItem span.DeleteSlide:after {
			content: 'Delete';
			color: white;
			width: 100px;
			text-align: center;
			display: inline-block;
		}


	.PlaylistEditor.EditView span.DragHandle {
		float: left;
		display: inline-block;
		width: 50px;
		height: 1em;
		margin: 0;
		background: url('/Templates/_images/Icon_Gripdots.png') center center no-repeat;
		cursor: move;
		position:  absolute;
		left: 0;
		top: 0;
		height: 100%;
	}



.PlaylistEditor.AddView li {
	padding: 10px 25px;
    font-weight: 700;
    font-size: 16px;	
      -webkit-transition: background 0.5s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
          transition: background 0.5s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */	
}

	.PlaylistEditor.AddView li span {
		display: inline-block;
		max-width: 90%;
	}
	.PlaylistEditor.AddView span.AddSlide {
		float: right;
		display: inline-block;
		width: 1em;
		height: 1em;
		cursor: pointer;
	}
	.PlaylistEditor.AddView span.AddSlide:before {
		font-family: "Font Awesome 5 Free";
		content: "\f067";
		margin: 0 0 0 0;
		font-weight: bold;
		color: #a0a0a0;
	}
	.PlaylistEditor.AddView span.AddSlide:hover:before{
		color:#55b84b;
	}


	.PlaylistEditor.AddView li.addedToPlaylist {
		background:#55b84b
	}
	.PlaylistEditor.AddView li.addedToPlaylist  span.AddSlide:before {
		color:#ffffff
	}
	.PlaylistEditor.AddView li.addedToPlaylist span {
		color:#ffffff
	}





.SlideEditor.EditView {
    width: 700px;
    max-width: 100%;
}
	
	.SlideEditor a {
		text-decoration: none;
	}

	.SlideEditor ul ,
	.SlideEditor li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.SlideEditor ul {
		padding: 0;
	}

	.SlideEditor li {
		background: white;
		list-style: none;
		position: relative;
		margin: 0 0 3px 0;
		/* min-height:  96px; */
		padding: 10px 20px;
		border: 1px solid #e2e2e2;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
		background-color: #FFFFFF;
	}
		.SlideEditor li a {
			display: block;
			color: #999;
		}
		.SlideEditor li a:hover {
			color: #999;
		}
			.SlideEditor li a:after {
				content: "";
				display: table;
				clear: both;			
			}


.SlideEditor.ListView li span.SlideName {
    display:block;
    padding: 0;
    font-weight: 700;
    font-size: 16px;
    color:#222;
}
.SlideEditor.ListView li span.DisplayDatesRange ,
.SlideEditor.ListView li span.Template {
	display: inline-block;
	font-size: 12px;
	color: #a0a0a0;
}
.SlideEditor.ListView li span.DisplayDatesRange:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f017";
    margin: 0 5px 0 0;
    font-size: 16px;
    color: #55b84b;
}
.SlideEditor.ListView li span.Template {
	float: right;
	position:relative;
}
.SlideEditor.ListView li span.Template:before{
    font-weight: 900;
    width:13px;
    height:13px;
    top:2px;
    left:-20px;
    background:#d6d6d6;
    position:absolute;
    content: "";
    margin: 0 5px 0 0;
    font-size: 16px;
    border-radius:2px;
}
	 .NewSlideButton {
	display: inline-block;
	padding: 10px 29px;
	border: 0;
	border-radius: 2px;
	text-decoration: none;
	font-size: 14px;
	min-width: 125px;
	float: right;
	clear: both;
	margin: 0px 20px 1em 0;
	font-weight: 600;
	}
	 .NewSlideButton:before {
		font-family: "Font Awesome 5 Free";
		content: "\f067";
		margin: 0 0.5em 0 0;
		font-weight: bold;
	}

	.SlideEditor.ListView .OrderDropdown {
		/* float: right; */
		padding: 12px 30px 12px 10px;
		font-size: 12px !important;
		font-weight: 600;
		min-width:  150px;
		margin: 0 0 10px 0;
		border: 1px solid #e2e2e2;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	}

.SlideEditor.NewSlideView {
	padding: 1px 0;
	max-width:700px;
}

	.SlideEditor.NewSlideView .NewSlideInput {
		margin: 0 0 1em 0;
	}
		.SlideEditor.NewSlideView .NewSlideInput label {
			display: block;
			font-weight: 700;
			vertical-align: top;
			font-size: 16px;
			color: #333;
		}
		.SlideEditor.NewSlideView .NewSlideInput input,
		.SlideEditor.NewSlideView .NewSlideInput select {
			margin: 0.25em 0 0 0;
			display: block;
			width: 100%;
			box-sizing: border-box;
			margin: 0.25em 0 0 0;
			border: 1px solid #e2e2e2;
			box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
			border-radius: 2px;
			color: #565656;
			padding: 8px 12px;
    	}
		.SlideEditor.NewSlideView a.SaveButton {
		    box-sizing: border-box;
		    display: inline-block;
		    text-align: center;
		    background: #55b84b;
		    color: #fff;
		    border-radius: 2px;
		    padding: 10px 40px;
		    min-width: 125px;
		    border: 0 !important;
		    font-size: 12px;
		    margin: 0 0 1em 1em;
		}
			.SlideEditor.NewSlideView a.SaveButton:before {
				font-family: "Font Awesome 5 Free";
				content: "\f00c";
				font-weight: bold;
				margin: 0 0.5em 0 0;
			}



.SlideEditor.EditView .SlideEditorPreviewContainer {
	position: relative;
	width: 711px;
	max-width: 100%;
	height: 400px;
	margin: 0 0 20px 0;
	background: black;
	/* overflow: hidden; */
}
	.SlideEditor.EditView .SlideEditorPreviewContainer:after {
		display: block;
		position: absolute;
		top: -100px;
		left: 0;
		right: 0;
		text-align: center;
		line-height: 0;
		content: 'Loading preview...';
		color: white;
		opacity: 0;
	}
	.SlideEditor.EditView .SlideEditorPreviewContainer.loading:after {
		top: 0;
		line-height: 400px;
		opacity: 1;

		transition: opacity 1s 1s;
	}


	.SlideEditor.EditView .SlideEditorPreviewContainer .IframeContainer {
		position: relative;
		/* overflow: hidden; */
		transform-origin: 0% 0%; /* scale and keep the top left corner at the came point */
	}

	.SlideEditor.EditView .SlideEditorPreviewContainer a.ReloadPreviewButton {
		position: absolute;
		bottom: 0;
		right: 0px;
		border-radius: 0;
		color: white;
		padding: 10px;
		font-size:18px;
		text-align:  center;
	}
	.SlideEditor.EditView .SlideEditorPreviewContainer a.ReloadPreviewButton{
		
	}
	.SlideEditor.EditView .SlideEditorPreviewContainer a.ReloadPreviewButton span{
		display:none;
	}
	.SlideEditor.EditView .SlideEditorPreviewContainer a.ReloadPreviewButton:before{
		font-family: "Font Awesome 5 Free";
		content: "\f2f1";
		display: block;
		margin: 0;
		font-weight: bold;
		text-shadow: 1px 1px 6px rgba(0, 0, 0, 1);
		transition: all 0.2s ease-out;
	}
	.SlideEditor.EditView .SlideEditorPreviewContainer a.ReloadPreviewButton:hover:before{
		transform: rotate(50deg);
	}
	.SlideEditor.EditView .SlideEditorPreviewContainer a.ReloadPreviewButton:active:before{
		transform: rotate(180deg);
	}
	.SlideEditor.EditView .SlideEditorPreviewContainer.loading a.ReloadPreviewButton { display: none; }

	.SlideEditor.EditView .SlideNameAndInputSelector {
		padding: 1em 0;
	}
		.SlideEditor.EditView .SlideNameAndInputSelector p.SlideName {
			/* text-align: center; */
			font-weight: 700;
			font-size: 30px;
			color: #333;
		}
		.SlideEditor.EditView .SlideNameAndInputSelector select {
			margin: 0.25em 0 0 0;

			display: block;
			width: 100%;
			box-sizing: border-box;
			margin: 0.25em 0 0 0;
			border: 1px solid #e2e2e2;
			box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
			border-radius: 2px;
			color: #565656;
			padding: 8px 12px;
		}
		.SlideEditor.EditView textarea {
			width:100%;
			min-height:100px;
			max-width:100%;
			min-width:100%;
		}

	.SlideEditor.EditView .PreviewAsContainer {
		background: #F1F5F8;
		border-bottom: 1px white solid;
		padding: 1em;
	}
		.SlideEditor.EditView .PreviewAsContainer label {
			display: block;
			font-weight: 700;
			vertical-align: top;
			font-size: 16px;
			color: #333;
		}
		.SlideEditor.EditView .PreviewAsContainer select {
			margin: 0.25em 0 0 0;

			display: block;
			width: 100%;
			box-sizing: border-box;
			margin: 0.25em 0 0 0;
			border: 1px solid #e2e2e2;
			box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
			border-radius: 2px;
			color: #565656;
			padding: 8px 12px;			
		}		

		.SlideEditor.EditView .Attributes ,
		.SlideEditor.EditView .VariableGroup {
			padding: 0;
		}

		.SlideEditor.EditView .VariableInput {
			margin: 1em 0;
			position: relative;
		}
		
			.SlideEditor.EditView .VariableInput label {
				display: block;
				font-weight: 700;
				vertical-align: top;
				font-size: 16px;
				color: #333;
			}
			.SlideEditor.EditView .VariableInput[data-type=Text] input ,
			.SlideEditor.EditView .VariableInput[data-type=Dropdown] select {
				display: block;
				width: 100%;
				box-sizing: border-box;
				margin: 0.25em 0 0 0;
				border: 1px solid #e2e2e2;
				box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
				border-radius: 2px;
				color: #565656;
				padding: 8px 12px;				
			}
			.SlideEditor.EditView .VariableInput .DateTimeInputsContainer {
			}
			.SlideEditor.EditView .VariableInput .PmCheckbox {
				display: inline-block;
			}
			.SlideEditor.EditView .VariableInput.Color > div {
				margin-top: 0.25em;
			}


			.SlideEditor.EditView .VariableInput[data-durationisperrssitem=true]:after {
				content: "seconds per RSS item";
				display: inline-block;
				position: absolute;
				top: 37px;
				right: 1em;
				font-size: 0.85em;
			}


	.SlideEditor.EditView .Attributes.hiddenForMobile ,
	.SlideEditor.EditView .VariableGroup.hiddenForMobile {
		display: none;
	}

	.SlideEditor.EditView .SaveButtonContainer {
		padding: 1em 0;
	}
		.SaveButtonContainer .SaveButton {
			box-sizing: border-box;
			display: inline-block;
			text-align: center;
			background: #55b84b;
			color: #fff;
			border-radius: 2px;
			padding: 10px 40px;
			min-width: 125px;
			border: 0 !important;
			font-size: 14px;
			font-weight: 600;
			text-decoration: none;
		}
		.SaveButtonContainer .SaveButton:before{
			font-family: "Font Awesome 5 Free";
			content: "\f00c";
			font-weight: bold;
			margin: 0 0.5em 0 0;
		}
		

@media (max-width: 992px) {
	.SlideEditor.EditView .SlideEditorPreviewContainer{
		height: 128px;
		overflow:hidden;
	}
	 .NewSlideButton{
		position:fixed;
		display:block;
		float:none;
		bottom: 2px;
		right: 2px;
		z-index: 3;
		width: 65px;
		height: 65px;
		padding:0;
		min-width: 0;
		border-radius: 50%;
		margin: 0;
	}
	 .NewSlideButton:before{
		text-align:center;
		font-size: 32px;
		width: 100%;
		display: block;
		position:  absolute;
		margin:  auto;
		top: 0;
		bottom: 0;
		height: 50px;
	}
	 .NewSlideButton span{
		display:none;
	}
	.SaveButtonContainer{
		position:fixed;
		bottom:0;
		left:0;
		z-index: 3;
		padding:  4px;
		width: 100%;
		background: #ffffff;
		-webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.5);
	}
	.SaveButtonContainer .SaveButton{
		width:100%;
	}
	.PlaylistEditor.ListView li a:after{
		display:none;
	}
	.PlaylistEditor.EditView li .ListItemContents,
	.PlaylistEditor.AddView li{
		padding-left: 50px;
		padding-right: 10px;
	}
}

@media (max-width: 580px) {
	.SlideEditor .DateContainer ,
	.SlideEditor .DateContainer input {
		display: block;
		width: 100%;
	}
	.SlideEditor .TimeContainer { display: block; }
		.SlideEditor .TimeContainer select { width: 70px; }
}


@media (max-width: 460px) {
	
	.SlideEditor.ListView li span.DisplayDatesRange ,
	.SlideEditor.ListView li span.Template {
		display: block;
		float: none;
	}
	.SlideEditor.ListView li span.Template {
		left: 21px;
	}
}




.SlideEditor.EditView .VariableInput.usingThemeValue {}
	.SlideEditor.EditView .VariableInput.usingThemeValue .UseThemeValue + * { display: none; }

.SlideEditor.EditView .VariableInput > label { display: inline-block; }
.SlideEditor.EditView .UseThemeValue {
	position: relative;
	display: inline-block;
	float: right;
	width: 66px;
	line-height: 25px;
}
		.SlideEditor.EditView .VariableInput.usingThemeValue .UseThemeValue:before {
			content: '[Using theme] Turn off to customise';
			display: block;
			position: absolute;
			top: 0;
			left: -202px;
			line-height: 25px;
			color: #333;
			white-space: nowrap;
			padding: 0 .5em;
			border-radius: 2px;
			font-size: 11px;
		}


		.SlideEditor.EditView .UseThemeValue input {
			width: 0 !important;
			height: 0 !important;
			opacity: 0;
		}
		.SlideEditor.EditView .UseThemeValue label {
			display: inline-block;
			box-sizing: border-box;
			width: 66px;
			height: 25px;
			position: relative;
			border-radius: 2px;
			background: #C1DEEC;
			overflow: hidden;

			transition: background 0.25s;
		}
			.SlideEditor.EditView .UseThemeValue input:checked + label {
				background: #80BBD9;
			}

			.SlideEditor.EditView .UseThemeValue label:before {
				content: 'OFF';
				color: #C1DEEC;
				display: block;
				width: 25px;
				height: 25px;
				box-sizing: border-box;
				border-radius: 2px;
				background: white;
				border: 1px #C1DEEC solid;
				position: absolute;
				top: 0px;
				left: 0px;
				text-align: center;
				line-height: 25px;
				font-size: 9px;
				font-family: sans-serif;

				transition: left 0.25s, border-color 0.25s;
			}
				.SlideEditor.EditView .UseThemeValue input:checked + label:before {
					content: 'ON';
					left: 41px;
					color: #80BBD9;
					border-color: #80BBD9;
				}


			.SlideEditor.EditView .UseThemeValue label span:before ,
			.SlideEditor.EditView .UseThemeValue label span:after {
				content: 'THEME';
				color: white;
				display: block;
				width: 41px;
				height: 25px;
				box-sizing: border-box;
				position: absolute;
				top: 0px;
				text-align: center;
				line-height: 25px;
				font-size: 9px;
				font-family: sans-serif;
				border: 1px transparent solid;
				transition: left 0.25s;		
			}
			.SlideEditor.EditView .UseThemeValue                 label span:before { left: -41px; }
			.SlideEditor.EditView .UseThemeValue input:checked + label span:before { left:   0px; }
			.SlideEditor.EditView .UseThemeValue                 label span:after  { left:  25px; }
			.SlideEditor.EditView .UseThemeValue input:checked + label span:after  { left:  66px; }   

			/* Automatically Updateded in patch version 3.0.0.0 */

.InformationBarList li { cursor: pointer; }
.InformationBarList li div.Edit { display: none; }

.InformationBarList li.NotPublished div.PublishDate ,
.InformationBarList li.NotPublished div.RecurringDescription ,
.InformationBarList li.NotPublished div.Locations { /* no need to show this info for non published items */
	display: none;
}

.InformationBarEdit .EnquiryLabelGroup.PublishStart > label span.RequiredMarker ,
.InformationBarEdit .EnquiryLabelGroup.PublishEnd   > label span.RequiredMarker {
	    color: #c00;
}


.InformationBarList li.NotRecurring div.RecurringDescription { display: none; } /* no need to show the "Not recurring" text */

.InformationBarList li.NoPublishStartDate div.PublishDate { display: none; } /* no publish date to be displayed */

.InformationBarList li.NotRecurring.Published div.Publish { display: none; } /* no need to show the "Published" text for non recurring items */

.InformationBarList li div.Locations:empty { display: none; } /* hide empty locations */

.InformationBarList li.Expired div.PublishDate { display: none; } /* don't show the publish start date for expired items */

.InformationBarList li .ItemDetails {
	display: block;
	float: none;
	clear: both;
	padding-top: 0.5em;
}
	.InformationBarList li .ItemDetails div {
		display: inline-block;
		float: none;
		width: auto;
		margin: 0 0.5em 0 0;
		font-size: 12px;
	    color: #999;
	}

	.InformationBarList div.Locations span + span:before { content: ', '; }




.InformationBarList li div.PublishDate:before ,
.InformationBarList li div.RecurringDescription:before ,
.InformationBarList li div.Locations:before {
	display: inline-block;
	font-family: "Font Awesome 5 Free";
    content: "\f044";
    margin: 0 5px 0 0;
	font-weight: 700;
}
	.InformationBarList li div.PublishDate:before          { content: "\f017"; }
	.InformationBarList li div.RecurringDescription:before { content: "\f021"; }
	.InformationBarList li div.Locations:before            { content: "\f3c5"; }

.SlideEditor .VariableInput.Recurring input[type=checkbox] + label { display: none; }
.SlideEditor .VariableInput.Recurring select { margin-left: 1em; }

.SlideEditor .VariableInput.WeeklyFortnightlyDays input[type=checkbox] + label {
	display: inline-block;
    margin-left: 1em;
    margin-top: 2px;
}
.SlideEditor .VariableInput.AddSpecificDate input[type=button] {
	display: inline-block;
	border: none;
	border-radius: 2px;
	padding: 14px 40px;
	font-size: 14px;
	font-weight: 600;
	box-sizing: border-box;
	background: #999;
	color: white;
}




.SlideEditor .VariableInput.RecurUntil .DateTimeContainer label { display: none; }


.dateTag {
	line-height: 1.8;
	display: inline-block;
	border: 1px #ccc solid;
	padding: .5em 1em;
	border-radius: 2px;
	background: white;			
}
.dateTag:before {
	font-family: "Font Awesome 5 Free";
	content: "\f274";
	font-weight: bold;
	margin: 0 5px 0 0;
	color: #1e6eb5
}
	.dateTag label {
		display: inline-block !important;
		font-weight: normal !important;
		font-size: 14px !important;
	}
	.dateTag .delete {
		display: inline-block;
		width: 14px;
		height: 14px;
		position: relative;
		top: 2px;
		margin-left: 0.5em;		
	}
	.dateTag .delete:before {
		font-family: "Font Awesome 5 Free";
		content: "\f00d";
		display: block;
		font-weight: bold;
		color: #cc0000;
		width: 14px;
		height: 14px;
		line-height: 14px;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
	}





/* Automatically Updateded in patch version 3.1.0.0 */

.SlideEditor.EditView .VariableInput.disabled:after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255,255,255,0.8);
}



/* Automatically Updateded in patch version 3.1.0 */

.SlideEditor.EditView .VariableInput.disabled:after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255,255,255,0.8);
}

.SlideEditor.EditView .VariableInput.RssFeed a.categoryWizardLink {
	background: #1268B5;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	display: inline-block;
	position: relative;
	top: 10px;
	margin-left: 10px;
}
	.SlideEditor.EditView .VariableInput.RssFeed a.categoryWizardLink:after {
		font-family: "Font Awesome 5 Free";
		content: "\f067";
		display: block;
		width: 32px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		color: white;
		position: absolute;
		top: 0;
		left: 0;
		font-weight: bold;
		
	}

	.SlideEditor.EditView .VariableInput.RssFeed a.categoryWizardLink span { display: none; }
/* Automatically Updateded in patch version 3.1.4.0 */
/* -----[ Patch 3.2.0 ]----- */
/* -----[ Add to DigitalSignage.css  ]----- */
















/* colour input updates */

.SlideEditor.EditView .VariableInput.Color > div {
	margin-top: 0;
	float: right;
	border: 1px solid #e2e2e2;
    box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	background: white;
}
	.SlideEditor.EditView .VariableInput.Color > span.UseThemeValue + div { margin-right: 18px; }

.SlideEditor.EditView .VariableInput.Color span.digitalSignageColourPicker {
	display: inline-block;
	padding: 2px;
	background: white;
}
	.SlideEditor.EditView .VariableInput.Color span.digitalSignageColourPicker input.ColourInput { display: none; }

/* spreadsheet upload input */

    .SlideEditorSpreadsheetUpload {}

    .SlideEditorSpreadsheetUpload input[type=file] { display: none; }
    
    .SlideEditorSpreadsheetUpload .UploadNewSpreadsheet 
    {
	    box-sizing: border-box;
	    display: inline-block !important;
	    text-align: center;
	    background: #D6D6D6;
	    color: #fff !important;
	    border-radius: 2px;
	    width: 87px;
	    height: 87px;
	    border: 0 !important;
	    font-size: 11px !important;
	    padding: 0;	  
	    margin: 0 10px 0 0;  
    }
	    .SlideEditorSpreadsheetUpload .DownloadPreviousSpreadsheet {
	    	display: none;
	    }
    	.SlideEditorSpreadsheetUpload .UploadedNote { display: none; }
    
		.SlideEditorSpreadsheetUpload .UploadNewSpreadsheet {
			padding: 0;
			position: relative;
			cursor: pointer;
			background: url('/data/__default__/Templates/_images/digitalsignage-spreadsheetupload.png') 0 0 no-repeat;
		}
		.SlideEditorSpreadsheetUpload .UploadedNote ~ .UploadNewSpreadsheet:after {
			display: block;
			font-family: "Font Awesome 5 Free";
			content: "\f058";
			font-weight: bold;
			font-size: 16px;
			position: absolute;
			bottom: 5px;
			right: 5px;
			background: white;
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			color: #55b84b;
			border-radius: 12px;
		}


	.VariableInput.SpreadsheetUpload > label .DownloadPreviousSpreadsheet {
		box-sizing: border-box;
		display: inline-block;
		text-align: center;
		background: #aaa;
		color: #fff;
		border-radius: 2px;
		padding: 5px 10px;
		border: 0 !important;
		font-size: 12px;
		margin: 0px 0 0 1em;
		transform: translateY(-2px);
	}		
		.VariableInput.SpreadsheetUpload > label .DownloadPreviousSpreadsheet:before {
			display: inline-block;
			font-family: "Font Awesome 5 Free";
			content: "\f019";
			font-weight: bold;
			margin: 0 10px 0 0;
		}




/* slide editor list view filter */

.SlideEditor ul { clear: both; }
.SlideEditor li.hidden { display: none; }

.SlideEditor.ListView .ListFilterContainer {
    float: left;
    display: inline-block;
    position: relative;
}
	.SlideEditor.ListView .ListFilter {
	    padding: 8px 10px;
	    font-size: 12px !important;
	    margin: 0 0 0 10px;
	    border: 1px solid #e2e2e2;
	    box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	    min-width: 200px;
		height: auto;
	}
		.SlideEditor.ListView .ListFilter::placeholder { color: #555; }

		.SlideEditor.ListView .ListFilterIcon:after {
			display: inline-block;
			position: absolute;
			top: 8px;
			right: 8px;
			font-size: 16px;
			color: #ccc;
			font-style: normal;

			font-family: "Font Awesome 5 Free";
			content: "\f002";
			font-weight: bold;
		}
	
	.NewSlideButton { clear: none; }
	
	.SlideEditor.ListView li span.Template { margin-top: 15px; }


.SlideEditor.ListView .OrderDropdown {
	margin: 0 0 0 10px;	
    padding: 7px 10px;
}

@media (max-width: 992px) {
	.SlideEditor.ListView .Tabs {
		margin: 0 !important;
	}
		.SlideEditor.ListView .Tabs a,
		.SlideEditor.ListView .Tabs a:hover {
			width: 33%;
		}

	.SlideEditor.ListView .ListFilterContainer {
		display: block;
		float: none;
		clear: both;
		padding: 20px 0 0 0;
		margin: 0 0 20px 0;
	}
		.SlideEditor.ListView .ListFilter {
			margin: 0;
			width: 100%;
		}
		.SlideEditor.ListView .ListFilterIcon:after { top: 28px; }
	
	
	
	.SaveButtonContainer.HasSaveAndUpdatePlaylistsButton .SaveButton { padding-left: 0; padding-right: 0; min-width: 0; }

	.SaveButtonContainer.HasSaveAndUpdatePlaylistsButton .SaveButton:first-child               { width: 25.0%; }
	.SaveButtonContainer.HasSaveAndUpdatePlaylistsButton .SaveButton:first-child + .SaveButton { width: calc(75% - 4px); float: right; }
}

/* slide editor active / inactive switch */

.SlideEditor.ListView .Tabs {
	margin: 0 0 2em;
	clear: both;
}

	.SlideEditor.ListView .Tabs a,
	.SlideEditor.ListView .Tabs a:hover {
		box-sizing: border-box;

		float: left;

	    margin: 0 !important;
	    display: inline-block;
	    padding: 8px 25px;
	    text-align: center;
	    cursor: pointer;
	    border: 1px solid transparent;
	    border-bottom: 1px solid #ffffff;
	    font-weight: 600;
	    z-index: 2;
	    background-color: #e4ebef;
	    color: #a0a0a0;
	    border: 1px solid #d6d6d6;
	    position: relative;
	    font-size: 12px;		
	}
	.SlideEditor.ListView .Tabs a.current,
	.SlideEditor.ListView .Tabs a.current:hover {
		color: #555;
		cursor: default;
		background-color: #fff;
		border: 1px solid #ddd;
		position: relative;		
	}
		.SlideEditor.ListView .Tabs a.current:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 1px;
			bottom: -1px;
			left: 0;
			background: #005daa;			
		}

.SlideEditor.ListView li span.OptionsButton {
	content: '';
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	display: none;
}
	.SlideEditor.ListView li span.OptionsButton:after {
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		content: "\f142";
		font-weight: bold;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		line-height: 30px;
		text-align: center;
	}


.SlideEditor.ListView li div.slideListButton {
	background: #1e6eb5;
	width: 30px;
	height: 30px;
	color: white;
	position: absolute;
	top: 15px;
	right: 0;
	border-radius: 2px;	
}
	.SlideEditor.ListView li div.slideListButton.edit   { right: 115px; }
	.SlideEditor.ListView li div.slideListButton.copy   { right:  75px; }
	.SlideEditor.ListView li div.slideListButton.delete { right:  35px; background: #e1251b; }

	.SlideEditor.ListView li.deleted div.slideListButton.edit   { right: 75px; }
	.SlideEditor.ListView li.deleted div.slideListButton.copy   { right: 35px; }
	.SlideEditor.ListView li.deleted div.slideListButton.delete { display: none; }


	.SlideEditor.ListView li div.slideListButton:after {
		width: 30px;
		height: 30px;
		font-family: "Font Awesome 5 Free";
		content: "\f067";
		font-size: 14px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		line-height: 30px;
	}
	.SlideEditor.ListView li div.slideListButton.edit:after   { content: "\f044"; }
	.SlideEditor.ListView li div.slideListButton.copy:after   { content: "\f24d"; }
	.SlideEditor.ListView li div.slideListButton.delete:after { content: "\f1f8"; font-weight: bold; }

	.SlideEditor.ListView li div.slideListButton span { display: none; }

@media screen and (max-width: 670px) {
	.SlideEditor.ListView li span.OptionsButton { display: block; }
	.SlideEditor.ListView li div.slideListButton { display: none; }
}



/* slide editor status toggle */

.SlideEditor.EditView .VariableInput.Status div ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
	.SlideEditor.EditView .VariableInput.Status div ul:after {
		content: "";
		display: table;
		clear: both;
	}


	.SlideEditor.EditView .VariableInput.Status div li {
		display: inline-block;
		list-style: none;
		margin: .25em 0;
		padding: 0;
		float: left;
		border: none;
		box-shadow: none;	
		min-height: 0;		
	}
	.SlideEditor.EditView .VariableInput.Status div input {
		display: none;
	}
	.SlideEditor.EditView .VariableInput.Status div label {
		    display: inline-block;
		    padding: 10px 30px;
		    cursor: pointer;
		    z-index: 2;
		    background-color: #e4ebef;
		    color: #404040;
		    border: 1px solid #d6d6d6;
			font-size: 12px;
			font-weight: normal;		    
	}
		.SlideEditor.EditView .VariableInput.Status div input:checked + label {
			color: #555;
			cursor: default;
			background-color: #fff;
			border: 1px solid #ddd;
			position:relative
		
		}
		.SlideEditor.EditView .VariableInput.Status div input:checked + label:after{
			content:'';
			position:absolute;
			width: calc(100% + 2px);
			height: 4px;
			bottom: -1px;
			left: -1px;
			background: #444444;
		}


/* slide editor "update playlist" view styles */

.SlideEditor.SlidePlaylistsContainer .Header {
	background: #333;
    text-align: center;
    padding: 0.5em;	
    margin: 0 0 2em;
}
	.SlideEditor.SlidePlaylistsContainer .Header h2 {
		font-weight: 700;
		font-size: 16px;
		margin: 0;
		color: white;
	}


.SlideEditor.SlidePlaylistsContainer ul { padding: 10px 0; }
.SlideEditor.SlidePlaylistsContainer li {
	min-height: 0;
	font-weight: 700;
	font-size: 16px;	
}
	.SlideEditor.SlidePlaylistsContainer li span.PlaylistName {
		display: inline-block;
		width: calc(100% - 55px);
	}


	.SlideEditor.SlidePlaylistsContainer .ToggleContainer { float: right; }
	.SlideEditor.SlidePlaylistsContainer .ToggleContainer input { display: none; }
		.SlideEditor.SlidePlaylistsContainer .ToggleContainer label {
			display: inline-block;
			width: 44px;
			height: 22px;
			background: #fff;
			border-radius: 12px;
			border: 1px solid #e2e2e2;
			background-color: #FFFFFF;			
			position: relative;
			background: #e1251b;
			top: -3px;

			transition: background-color 0.25s;
		}
		.SlideEditor.SlidePlaylistsContainer .ToggleContainer label:before {
			content: '';
			position: absolute;
			top: -1px;
			left: -1px;
			width: 22px;
			height: 22px;
			background: white;
			border-radius: 12px;
			border: 1px #e2e2e2 solid;
			/* box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1); */

			transition: left 0.25s;
		}
		.SlideEditor.SlidePlaylistsContainer .ToggleContainer input:checked + label {
			background: #55b84b;
		}
		.SlideEditor.SlidePlaylistsContainer .ToggleContainer input:checked + label:before {
			left: 22px;
		}

	.SlideEditor.SlidePlaylistsContainer .BackButtonContainer {
		margin: 2em 0 0 0;
	}
		.SlideEditor.SlidePlaylistsContainer .BackToSlideListButton {
		    box-sizing: border-box;
		    display: inline-block;
		    text-align: center;
		    background: #999;
		    color: white;
		    border-radius: 2px;
		    padding: 10px 40px;
		    min-width: 125px;
		    border: 0 !important;
		    font-size: 12px;
			font-weight: 600;
			text-decoration: none;
		}
			.SlideEditor.SlidePlaylistsContainer .BackToSlideListButton:before {
				display: inline-block;
				font-family: "Font Awesome 5 Free";
				content: "\f060";
				margin: 0 0.5em 0 0;
				font-weight: bold;
			}

/* playlist editor tab updates */

.PlaylistEditor .Tabs a,
.PlaylistEditor .Tabs a:hover {
	width: 33.33%;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
}

/* playlist editor location tree */

.PlaylistEditor .CategoryCheckboxes {
	padding: 10px;
}

.PlaylistEditor .CategoryCheckboxes li {
	border: none;
	padding: 0 0 0 18px;
	box-shadow: none;
	font-weight: normal;
	font-size: inherit;
}
	.PlaylistEditor .CategoryCheckboxes li label {
		padding: 0 0 0 30px;
	}

.PlaylistEditor .SelectClearAll {
	margin: 0 0 1em 0;
}
	.PlaylistEditor .SelectClearAll a {
		font-size: 0.85em;
		margin: 0 0.5em 0 0;
		background: #666;
		color: white;
		border: none;
		text-transform: uppercase;
		padding: .5em 1em;
	}

/* new buttons on the playlist editor list view */

.PlaylistEditor li { padding-right: 155px; }

.PlaylistEditor.ListView li a:after { display: none; }

.PlaylistEditor.ListView li div.playlistListButton {
	position: absolute;
	background: #1e6eb5;
	width: 30px;
	height: 30px;
	color: white;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	border-radius: 2px;	
}
	.PlaylistEditor.ListView li div.playlistListButton.edit   { right: 105px; }
	.PlaylistEditor.ListView li div.playlistListButton.copy   { right:  65px; }
	.PlaylistEditor.ListView li div.playlistListButton.delete { right:  25px; background: #e1251b; }

	.PlaylistEditor.ListView li div.playlistListButton:after {
		width: 30px;
		height: 30px;
		font-family: "Font Awesome 5 Free";
		content: "\f067";
		font-size: 14px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		line-height: 30px;
	}
	.PlaylistEditor.ListView li div.playlistListButton.edit:after   { content: "\f044"; }
	.PlaylistEditor.ListView li div.playlistListButton.copy:after   { content: "\f24d"; }
	.PlaylistEditor.ListView li div.playlistListButton.delete:after { content: "\f1f8"; font-weight: bold; }

	.PlaylistEditor.ListView li div.playlistListButton span { display: none; }


.PlaylistEditor.ListView li span.OptionsButton {
	content: '';
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	display: none;
}
	.PlaylistEditor.ListView li span.OptionsButton:after {
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		content: "\f142";
		font-weight: bold;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		line-height: 30px;
		text-align: center;
	}

@media screen and (max-width: 670px) {
	.PlaylistEditor.ListView li span.OptionsButton { display: block; }
	.PlaylistEditor.ListView li div.playlistListButton { display: none; }
}



/* webview updates to accommodate the themed info bars and full screen alerts */

#InformationBarContainer {
	transition: height 0.25s 0.1s, background-color 0.5s;
}
	#InformationBarContainer.HasThemeIcon {
		background-size: contain;
		background-position: 0.5em center;
	}


body.fullScreenAlert #InformationBarContainer img#InformationBarImage { display: none; }				

body.fullScreenAlert #InformationBarContainer #InformationBarTextContainer {
	white-space: normal !important;
	margin: 0 !important;

	top    : 2em !important;
	bottom : 2em !important;
	left   : 2em !important;
	right  : 2em !important;

	height: auto !important;
}

	body.fullScreenAlert #InformationBarContainer #InformationBarTextContainer img {
		float: left;
		margin: 0 1em 0.5em 0;
		max-width: 33%;
		max-height: 33%;
	}


body.showInformationBar.fullScreenAlert #InformationBarContainer {
	height: 100%;
	transition: height: 0.25s;
	z-index: 1000;
}
body.showInformationBar.fullScreenAlert iframe {
	display: none !important;
	visibility: hidden !important;
	top: 100% !important;
}				





/* Automatically Updateded in patch version 3.1.4 */
/* -----[ Patch 3.3.0 ]----- */
/* -----[ Add to DigitalSignage.css  ]----- */






/* colour input updates */

.SlideEditor.EditView .VariableInput.Color > div {
	margin-top: 0;
	float: right;
	border: 1px solid #e2e2e2;
    box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	background: white;
}
	.SlideEditor.EditView .VariableInput.Color > span.UseThemeValue + div { margin-right: 18px; }

.SlideEditor.EditView .VariableInput.Color span.digitalSignageColourPicker {
	display: inline-block;
	padding: 2px;
	background: white;
}
	.SlideEditor.EditView .VariableInput.Color span.digitalSignageColourPicker input.ColourInput { display: none; }

/* spreadsheet upload input */

    .SlideEditorSpreadsheetUpload {}

    .SlideEditorSpreadsheetUpload input[type=file] { display: none; }
    
    .SlideEditorSpreadsheetUpload .UploadNewSpreadsheet 
    {
	    box-sizing: border-box;
	    display: inline-block !important;
	    text-align: center;
	    background: #D6D6D6;
	    color: #fff !important;
	    border-radius: 2px;
	    width: 87px;
	    height: 87px;
	    border: 0 !important;
	    font-size: 11px !important;
	    padding: 0;	  
	    margin: 0 10px 0 0;  
    }
	    .SlideEditorSpreadsheetUpload .DownloadPreviousSpreadsheet {
	    	display: none;
	    }
    	.SlideEditorSpreadsheetUpload .UploadedNote { display: none; }
    
		.SlideEditorSpreadsheetUpload .UploadNewSpreadsheet {
			padding: 0;
			position: relative;
			cursor: pointer;
			background: url('/data/__default__/Templates/_images/digitalsignage-spreadsheetupload.png') 0 0 no-repeat;
		}
		.SlideEditorSpreadsheetUpload .UploadedNote ~ .UploadNewSpreadsheet:after {
			display: block;
			font-family: "Font Awesome 5 Free";
			content: "\f058";
			font-weight: bold;
			font-size: 16px;
			position: absolute;
			bottom: 5px;
			right: 5px;
			background: white;
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			color: #55b84b;
			border-radius: 12px;
		}


	.VariableInput.SpreadsheetUpload > label .DownloadPreviousSpreadsheet {
		box-sizing: border-box;
		display: inline-block;
		text-align: center;
		background: #aaa;
		color: #fff;
		border-radius: 2px;
		padding: 5px 10px;
		border: 0 !important;
		font-size: 12px;
		margin: 0px 0 0 1em;
		transform: translateY(-2px);
	}		
		.VariableInput.SpreadsheetUpload > label .DownloadPreviousSpreadsheet:before {
			display: inline-block;
			font-family: "Font Awesome 5 Free";
			content: "\f019";
			font-weight: bold;
			margin: 0 10px 0 0;
		}




/* slide editor list view filter */

.SlideEditor ul { clear: both; }
.SlideEditor li.hidden { display: none; }

.SlideEditor.ListView .ListFilterContainer {
    float: left;
    display: inline-block;
    position: relative;
}
	.SlideEditor.ListView .ListFilter {
	    padding: 8px 10px;
	    font-size: 12px !important;
	    margin: 0 0 0 10px;
	    border: 1px solid #e2e2e2;
	    box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	    min-width: 200px;
		height: auto;
	}
		.SlideEditor.ListView .ListFilter::placeholder { color: #555; }

		.SlideEditor.ListView .ListFilterIcon:after {
			display: inline-block;
			position: absolute;
			top: 8px;
			right: 8px;
			font-size: 16px;
			color: #ccc;
			font-style: normal;

			font-family: "Font Awesome 5 Free";
			content: "\f002";
			font-weight: bold;
		}
	
	.NewSlideButton { clear: none; }
	
	.SlideEditor.ListView li span.Template { margin-top: 15px; }


.SlideEditor.ListView .OrderDropdown {
	margin: 0 0 0 10px;	
    padding: 7px 10px;
}

@media (max-width: 992px) {
	.SlideEditor.ListView .Tabs {
		margin: 0 !important;
	}
		.SlideEditor.ListView .Tabs a,
		.SlideEditor.ListView .Tabs a:hover {
			width: 50%;
		}

	.SlideEditor.ListView .ListFilterContainer {
		display: block;
		float: none;
		clear: both;
		padding: 20px 0 0 0;
		margin: 0 0 20px 0;
	}
		.SlideEditor.ListView .ListFilter {
			margin: 0;
			width: 100%;
		}
		.SlideEditor.ListView .ListFilterIcon:after { top: 28px; }
	
	
	
	.SaveButtonContainer.HasSaveAndUpdatePlaylistsButton .SaveButton { padding-left: 0; padding-right: 0; min-width: 0; }

	.SaveButtonContainer.HasSaveAndUpdatePlaylistsButton .SaveButton:first-child               { width: 25.0%; }
	.SaveButtonContainer.HasSaveAndUpdatePlaylistsButton .SaveButton:first-child + .SaveButton { width: calc(75% - 4px); float: right; }
}

/* slide editor active / inactive switch */

.SlideEditor.ListView .Tabs {
	margin: 0 0 2em;
	clear: both;
}

	.SlideEditor.ListView .Tabs a,
	.SlideEditor.ListView .Tabs a:hover {
		box-sizing: border-box;

		float: left;

	    margin: 0 !important;
	    display: inline-block;
	    padding: 8px 25px;
	    text-align: center;
	    cursor: pointer;
	    border: 1px solid transparent;
	    border-bottom: 1px solid #ffffff;
	    font-weight: 600;
	    z-index: 2;
	    background-color: #e4ebef;
	    color: #a0a0a0;
	    border: 1px solid #d6d6d6;
	    position: relative;
	    font-size: 12px;		
	}
	.SlideEditor.ListView .Tabs a.current,
	.SlideEditor.ListView .Tabs a.current:hover {
		color: #555;
		cursor: default;
		background-color: #fff;
		border: 1px solid #ddd;
		position: relative;		
	}
		.SlideEditor.ListView .Tabs a.current:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 1px;
			bottom: -1px;
			left: 0;
			background: #005daa;			
		}

.SlideEditor.ListView li span.OptionsButton {
	content: '';
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	display: none;
}
	.SlideEditor.ListView li span.OptionsButton:after {
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		content: "\f142";
		font-weight: bold;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		line-height: 30px;
		text-align: center;
	}


.SlideEditor.ListView li div.slideListButton {
	background: #1e6eb5;
	width: 30px;
	height: 30px;
	color: white;
	position: absolute;
	top: 15px;
	right: 0;
	border-radius: 2px;	
}
	.SlideEditor.ListView li div.slideListButton.edit   { right: 115px; }
	.SlideEditor.ListView li div.slideListButton.copy   { right:  75px; }
	.SlideEditor.ListView li div.slideListButton.delete { right:  35px; background: #e1251b; }

	.SlideEditor.ListView li.deleted div.slideListButton.edit   { right: 75px; }
	.SlideEditor.ListView li.deleted div.slideListButton.copy   { right: 35px; }
	.SlideEditor.ListView li.deleted div.slideListButton.delete { display: none; }


	.SlideEditor.ListView li div.slideListButton:after {
		width: 30px;
		height: 30px;
		font-family: "Font Awesome 5 Free";
		content: "\f067";
		font-size: 14px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		line-height: 30px;
	}
	.SlideEditor.ListView li div.slideListButton.edit:after   { content: "\f044"; }
	.SlideEditor.ListView li div.slideListButton.copy:after   { content: "\f24d"; }
	.SlideEditor.ListView li div.slideListButton.delete:after { content: "\f1f8"; font-weight: bold; }

	.SlideEditor.ListView li div.slideListButton span { display: none; }

@media screen and (max-width: 670px) {
	.SlideEditor.ListView li span.OptionsButton { display: block; }
	.SlideEditor.ListView li div.slideListButton { display: none; }
}



/* slide editor status toggle */

.SlideEditor.EditView .VariableInput.Status div ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
	.SlideEditor.EditView .VariableInput.Status div ul:after {
		content: "";
		display: table;
		clear: both;
	}


	.SlideEditor.EditView .VariableInput.Status div li {
		display: inline-block;
		list-style: none;
		margin: .25em 0;
		padding: 0;
		float: left;
		border: none;
		box-shadow: none;	
		min-height: 0;		
	}
	.SlideEditor.EditView .VariableInput.Status div input {
		display: none;
	}
	.SlideEditor.EditView .VariableInput.Status div label {
		    display: inline-block;
		    padding: 10px 30px;
		    cursor: pointer;
		    z-index: 2;
		    background-color: #e4ebef;
		    color: #404040;
		    border: 1px solid #d6d6d6;
			font-size: 12px;
			font-weight: normal;		    
	}
		.SlideEditor.EditView .VariableInput.Status div input:checked + label {
			color: #555;
			cursor: default;
			background-color: #fff;
			border: 1px solid #ddd;
			position:relative
		
		}
		.SlideEditor.EditView .VariableInput.Status div input:checked + label:after{
			content:'';
			position:absolute;
			width: calc(100% + 2px);
			height: 4px;
			bottom: -1px;
			left: -1px;
			background: #444444;
		}


/* slide editor "update playlist" view styles */

.SlideEditor.SlidePlaylistsContainer .Header {
	background: #333;
    text-align: center;
    padding: 0.5em;	
    margin: 0 0 2em;
}
	.SlideEditor.SlidePlaylistsContainer .Header h2 {
		font-weight: 700;
		font-size: 16px;
		margin: 0;
		color: white;
	}


.SlideEditor.SlidePlaylistsContainer ul { padding: 10px 0; }
.SlideEditor.SlidePlaylistsContainer li {
	min-height: 0;
	font-weight: 700;
	font-size: 16px;	
}
	.SlideEditor.SlidePlaylistsContainer li span.PlaylistName {
		display: inline-block;
		width: calc(100% - 55px);
	}


	.SlideEditor.SlidePlaylistsContainer .ToggleContainer { float: right; }
	.SlideEditor.SlidePlaylistsContainer .ToggleContainer input { display: none; }
		.SlideEditor.SlidePlaylistsContainer .ToggleContainer label {
			display: inline-block;
			width: 44px;
			height: 22px;
			background: #fff;
			border-radius: 12px;
			border: 1px solid #e2e2e2;
			background-color: #FFFFFF;			
			position: relative;
			background: #e1251b;
			top: -3px;

			transition: background-color 0.25s;
		}
		.SlideEditor.SlidePlaylistsContainer .ToggleContainer label:before {
			content: '';
			position: absolute;
			top: -1px;
			left: -1px;
			width: 22px;
			height: 22px;
			background: white;
			border-radius: 12px;
			border: 1px #e2e2e2 solid;
			/* box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1); */

			transition: left 0.25s;
		}
		.SlideEditor.SlidePlaylistsContainer .ToggleContainer input:checked + label {
			background: #55b84b;
		}
		.SlideEditor.SlidePlaylistsContainer .ToggleContainer input:checked + label:before {
			left: 22px;
		}

	.SlideEditor.SlidePlaylistsContainer .BackButtonContainer {
		margin: 2em 0 0 0;
	}
		.SlideEditor.SlidePlaylistsContainer .BackToSlideListButton {
		    box-sizing: border-box;
		    display: inline-block;
		    text-align: center;
		    background: #999;
		    color: white;
		    border-radius: 2px;
		    padding: 10px 40px;
		    min-width: 125px;
		    border: 0 !important;
		    font-size: 12px;
			font-weight: 600;
			text-decoration: none;
		}
			.SlideEditor.SlidePlaylistsContainer .BackToSlideListButton:before {
				display: inline-block;
				font-family: "Font Awesome 5 Free";
				content: "\f060";
				margin: 0 0.5em 0 0;
				font-weight: bold;
			}

/* playlist editor tab updates */

.PlaylistEditor .Tabs a,
.PlaylistEditor .Tabs a:hover {
	width: 33.33%;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
}

/* playlist editor location tree */

.PlaylistEditor .CategoryCheckboxes {
	padding: 10px;
}

.PlaylistEditor .CategoryCheckboxes li {
	border: none;
	padding: 0 0 0 18px;
	box-shadow: none;
	font-weight: normal;
	font-size: inherit;
}
	.PlaylistEditor .CategoryCheckboxes li label {
		padding: 0 0 0 30px;
	}

.PlaylistEditor .SelectClearAll {
	margin: 0 0 1em 0;
}
	.PlaylistEditor .SelectClearAll a {
		font-size: 0.85em;
		margin: 0 0.5em 0 0;
		background: #666;
		color: white;
		border: none;
		text-transform: uppercase;
		padding: .5em 1em;
	}

/* new buttons on the playlist editor list view */

.PlaylistEditor li { padding-right: 155px; }

.PlaylistEditor.ListView li a:after { display: none; }

.PlaylistEditor.ListView li div.playlistListButton {
	position: absolute;
	background: #1e6eb5;
	width: 30px;
	height: 30px;
	color: white;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	border-radius: 2px;	
}
	.PlaylistEditor.ListView li div.playlistListButton.edit   { right: 105px; }
	.PlaylistEditor.ListView li div.playlistListButton.copy   { right:  65px; }
	.PlaylistEditor.ListView li div.playlistListButton.delete { right:  25px; background: #e1251b; }

	.PlaylistEditor.ListView li div.playlistListButton:after {
		width: 30px;
		height: 30px;
		font-family: "Font Awesome 5 Free";
		content: "\f067";
		font-size: 14px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		line-height: 30px;
	}
	.PlaylistEditor.ListView li div.playlistListButton.edit:after   { content: "\f044"; }
	.PlaylistEditor.ListView li div.playlistListButton.copy:after   { content: "\f24d"; }
	.PlaylistEditor.ListView li div.playlistListButton.delete:after { content: "\f1f8"; font-weight: bold; }

	.PlaylistEditor.ListView li div.playlistListButton span { display: none; }


.PlaylistEditor.ListView li span.OptionsButton {
	content: '';
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	display: none;
}
	.PlaylistEditor.ListView li span.OptionsButton:after {
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		content: "\f142";
		font-weight: bold;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		line-height: 30px;
		text-align: center;
	}

@media screen and (max-width: 670px) {
	.PlaylistEditor.ListView li span.OptionsButton { display: block; }
	.PlaylistEditor.ListView li div.playlistListButton { display: none; }
}



/* webview updates to accommodate the themed info bars and full screen alerts */

#InformationBarContainer {
	transition: height 0.25s 0.1s, background-color 0.5s;
}
	#InformationBarContainer.HasThemeIcon {
		background-size: contain;
		background-position: 0.5em center;
	}


body.fullScreenAlert #InformationBarContainer img#InformationBarImage { display: none; }				

body.fullScreenAlert #InformationBarContainer #InformationBarTextContainer {
	white-space: normal !important;
	margin: 0 !important;

	top    : 2em !important;
	bottom : 2em !important;
	left   : 2em !important;
	right  : 2em !important;

	height: auto !important;
}

	body.fullScreenAlert #InformationBarContainer #InformationBarTextContainer img {
		float: left;
		margin: 0 1em 0.5em 0;
		max-width: 33%;
		max-height: 33%;
	}


body.showInformationBar.fullScreenAlert #InformationBarContainer {
	height: 100%;
	transition: height: 0.25s;
	z-index: 1000;
}
body.showInformationBar.fullScreenAlert iframe {
	display: none !important;
	visibility: hidden !important;
	top: 100% !important;
}				


ul.CategoryCheckboxes input { margin: 0 0 5px 7px; }

.WebViewContainer p {
	font-size: 1em;
	line-height: 2em;
}

body.showInformationBar.fullScreenAlert #InformationBarContainer #InformationBarTextContainer p {
	line-height: 1.2em;
}





/* Automatically Updateded in patch version 3.3.2.0 */
/* -----[ Patch 3.4.0 ]----- */
/* -----[ Add to DigitalSignage.css  ]----- */

.SlideEditor.EditView .VariableInput.disabledByVisibilityRule { display: none; }

.SlideEditor.EditView .VariableInput[data-type=SpreadsheetSheet] select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0.25em 0 0 0;
	border: 1px solid #e2e2e2;
	box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	border-radius: 2px;
	color: #565656;
	padding: 8px 12px;
}




/* Automatically Updateded in patch version 3.3.2 */
/* -----[ Patch 3.4.0 ]----- */
/* -----[ Add to DigitalSignage.css  ]----- */

.SlideEditor.EditView .VariableInput.disabledByVisibilityRule { display: none; }

.SlideEditor.EditView .VariableInput[data-type=SpreadsheetSheet] select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0.25em 0 0 0;
	border: 1px solid #e2e2e2;
	box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	border-radius: 2px;
	color: #565656;
	padding: 8px 12px;
}


/* Automatically Updateded in patch version 3.4.2.0 */
/* -----[ Patch 3.4.3 ]----- */
/* -----[ Add to DigitalSignage.css  ]----- */

.SlideEditor.EditView .VariableInput.Video input.VideoLocation { display: none; }

.SlideEditor.EditView .VariableInput.Video .RadUpload {
	width: 87px;
	height: 87px;
}
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruFileWrap {
		width: 87px;
		height: 87px;
	}

	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li {
		margin: 0;
		border: none;
		box-shadow: none;
		padding: 0;
		background: none;
		position: relative;
		min-height: 0;
	}
		.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li p { display: none; }

	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruFakeInput ,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruFakeInput ~ label ,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruButton ,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li input[type=file] { display: none; }

	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li input[type=file] ~ label {
		display: block !important;
		width: 87px;
		height: 87px;
		border-radius: 2px;
		font-size: 0;
		background: url('/data/__default__/Templates/_images/digitalsignage-imageupload.png') 0 0 no-repeat;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	}
		.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li input[type=file] ~ label:before { display: none; }


	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruUploadProgress,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruUploadSuccess,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruUploadFailure,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruUploadCancelled {
		padding: 0;
		width: 87px;
		height: 87px;
		border-radius: 2px;
		background: #D6D6D6;
		white-space: normal;
		overflow-wrap: break-word;
		position: relative;
		padding: 0.25em 0.5em;
		box-sizing: border-box;
		color: white;
		text-shadow: 0 0 5px #666;
	}
		.SlideEditor.EditView .VariableInput.Video .RadUpload .ruFileProgressWrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 87px;
			height: 87px;
			border-radius: 2px;
			
			margin: 0;
			background: none;
		}	
		.SlideEditor.EditView .VariableInput.Video .RadUpload .ruFileProgress {
			background: green;
			opacity: 0.5;
			height: 100%;
			border-radius: 2px;
		}

	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruButton.ruCancel ,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruButton.ruRemove {
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 27px;
		height: 27px;
		font-size: 0;
		background: url('/data/__default__/Templates/_images/icon_imageuploadplus.png') 0 0 no-repeat;
		border-radius: 2px;
	}








/* Automatically Updateded in patch version 3.4.2 */
/* -----[ Patch 3.4.3 ]----- */
/* -----[ Add to DigitalSignage.css  ]----- */

.SlideEditor.EditView .VariableInput.Video input.VideoLocation { display: none; }

.SlideEditor.EditView .VariableInput.Video .RadUpload {
	width: 87px;
	height: 87px;
}
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruFileWrap {
		width: 87px;
		height: 87px;
	}

	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li {
		margin: 0;
		border: none;
		box-shadow: none;
		padding: 0;
		background: none;
		position: relative;
		min-height: 0;
	}
		.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li p { display: none; }

	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruFakeInput ,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruFakeInput ~ label ,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruButton ,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li input[type=file] { display: none; }

	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li input[type=file] ~ label {
		display: block !important;
		width: 87px;
		height: 87px;
		border-radius: 2px;
		font-size: 0;
		background: url('/data/__default__/Templates/_images/digitalsignage-imageupload.png') 0 0 no-repeat;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	}
		.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li input[type=file] ~ label:before { display: none; }


	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruUploadProgress,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruUploadSuccess,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruUploadFailure,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruUploadCancelled {
		padding: 0;
		width: 87px;
		height: 87px;
		border-radius: 2px;
		background: #D6D6D6;
		white-space: normal;
		overflow-wrap: break-word;
		position: relative;
		padding: 0.25em 0.5em;
		box-sizing: border-box;
		color: white;
		text-shadow: 0 0 5px #666;
	}
		.SlideEditor.EditView .VariableInput.Video .RadUpload .ruFileProgressWrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 87px;
			height: 87px;
			border-radius: 2px;
			
			margin: 0;
			background: none;
		}	
		.SlideEditor.EditView .VariableInput.Video .RadUpload .ruFileProgress {
			background: green;
			opacity: 0.5;
			height: 100%;
			border-radius: 2px;
		}

	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruButton.ruCancel ,
	.SlideEditor.EditView .VariableInput.Video .RadUpload .ruInputs li .ruButton.ruRemove {
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 27px;
		height: 27px;
		font-size: 0;
		background: url('/data/__default__/Templates/_images/icon_imageuploadplus.png') 0 0 no-repeat;
		border-radius: 2px;
	}







/* STARTCSS - 202106_100_task420.DigitalSignage.css */
.task420 {
	opacity: 1;
	color: #ff00FF;
}
/* 202106_100_task420.DigitalSignage.css - ENDCSS */

/* STARTCSS - 202108_100_task551.DigitalSignage.css */
.202108_000_task551 {
	opacity: 0.5;
	color: green; /* Note from steve - this used to be red */
}
/* 202108_100_task551.DigitalSignage.css - ENDCSS */

/* STARTCSS - 202108_2000_task237.css */
#root  *,
.MuiDialog-root *,
.MuiPopover-root * {
	font-family: 'open-sans', "Open Sans" !important;
	font-weight: inherit;
	box-sizing: content-box;
}

#root .MuiSwitch-root, #root .MuiSwitch-root *,
#root .MuiPaper-root, #root .MuiPaper-root *,
.MuiPopover-root *,
.MuiDialog-root * {
	box-sizing: border-box;
}

#root .tab-menu  {
	font-weight: 600;
}

#root .template-overlay-body button,
#root .edit-slide-page .slide-details .slide-details-header .slide-details-status,
#root .static-text .static-text-header .static-text-link {
	font-weight: 700;
}

#vibeimIframeContainer {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	z-index: 9999;
	position: fixed;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5);
	-webkit-tap-highlight-color: transparent;
	visibility: hidden;
}
#vibeimIframeContainer.show {
	visibility: visible;
}
	#vibeimIframeContainer #vibeImageManagerIframe {
		border: 0;
		width: 90%;
		height: 90%;
	}
/* 202108_2000_task237.css - ENDCSS */

/* STARTCSS - 202122_2000_task1315_PlaylistListAndPlaylistItem.css */
#root .bold,
.MuiDialog-root .bold,
.MuiPopover-root .bold {
	font-family: "OpenSans-Bold" !important;
}
/* 202122_2000_task1315_PlaylistListAndPlaylistItem.css - ENDCSS */

/* STARTCSS - 202205_2001_bug1632_InformationWithImageDisappearsAfterSaving.css */
#InformationBarContainer img {
	height: auto;
	width: auto;
	max-width: inherit;
	max-height: 100%;
	float: left;
}
/* 202205_2001_bug1632_InformationWithImageDisappearsAfterSaving.css - ENDCSS */

/* STARTCSS - 202208_2500_task1320_PlaylistPhase2PlaylistHeader.css */
body.IsEditPlaylistReactComp .navbar + .content {
	max-width: inherit !important;
	padding: 0 !important;
	margin: 0 !important; 
}
/* 202208_2500_task1320_PlaylistPhase2PlaylistHeader.css - ENDCSS */

/* STARTCSS - 202212_2000_task1853_PlaylistPhase2PlaylistPreviewWebview.css */
.WebViewContainer #playlist-controls {
	font-size: 20px;
    max-height: calc(100% - 130px);
    width: 584px;
    position: absolute;
    top: 0;
    left: calc(50% - 291px);
    color: white;
    font-family: 'open-sans', 'Open Sans', sans-serif;
    font-weight: bold;

	z-index: 5050;
}
.WebViewContainer #playlist-controls.hidden {
	display: none;
}

.contegro_mobile .WebViewContainer #playlist-controls {
	max-height: calc(100% - 190px);
	width: 880px;
    left: calc(50% - 440px);
}
	.WebViewContainer #playlist-controls > div {
		background-color: rgba(0, 0, 0, 0.7);
	}

	.WebViewContainer #playlist-controls #playlist-header {
		height: 60px;
		line-height: 60px;
		transition: top 0.25s;
		position: relative;
		padding: 0 60px 0 40px;
		margin-bottom: 1px;
		z-index: 1;
	}
	.WebViewContainer #playlist-controls.hidden #playlist-header {
		top: -61px !important;
	}
		.WebViewContainer #playlist-controls #playlist-header #playlist-header-name-and-duration {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
			.WebViewContainer #playlist-controls #playlist-header #playlist-header-name-and-duration #playlist-header-name {
				max-width: 75%;
			    height: 100%;
			    white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    display: inline-block;
			    vertical-align: middle;
			    top: -2px;
			    position: relative;
			    margin-right: 5px;
			    font-size: 23px;
			}
			.WebViewContainer #playlist-controls #playlist-header #playlist-header-name-and-duration #playlist-header-duration {
				display: inline-block;
				vertical-align: baseline;
				top: 2px;
				position: relative;
				font-weight: normal;
				font-size: 13px;
			}

		.WebViewContainer #playlist-controls #playlist-header #playlist-header-slides-menu-opener {
			position: absolute;
			top: 0;
		    right: 0;
		    width: 60px;
		    height: 100%;
		    cursor: pointer;
		}
			.WebViewContainer #playlist-controls #playlist-header #playlist-header-slides-menu-opener:after {
				    content: '';
				    position: absolute;
				    top: 0;
				    left: 0;
				    right: 0;
				    bottom: 0;
				    margin: auto;
				    width: 16.81px;
				    height: 3px;
				    background-color: white;
				    /*box-shadow: 0px 0px 10px #00b3e7;*/
			}

	.WebViewContainer #playlist-controls #playlist-preview-locations {
		height: 40px;
		opacity: 1;
		display: none;
		transition: opacity 0.5s;
		padding: 0 60px 0 40px;
		width: calc(100% - 100px);
		position: relative;
		z-index: 2;
	}
	.WebViewContainer #playlist-controls.hasPreviewLocations #playlist-preview-locations {
		display: block;
	}
	.WebViewContainer #playlist-controls.hidden #playlist-preview-locations {
		opacity: 0 !important;
	}
		.WebViewContainer #playlist-controls #playlist-preview-locations select {
			display: none; /*hide original SELECT element:*/
		}

		.WebViewContainer #playlist-controls.hidden #playlist-preview-locations .select-selected {
			background-color: DodgerBlue;
		}

		/*style the arrow inside the select element:*/
		.WebViewContainer #playlist-controls #playlist-preview-locations .select-selected:after {
			position: absolute;
			content: "";
			top: 17px;
    		right: 20px;
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-color: #fff transparent transparent transparent;
		}

		/*point the arrow upwards when the select box is open (active):*/
		.WebViewContainer #playlist-controls #playlist-preview-locations .select-selected.select-arrow-active:after {
			border-color: transparent transparent #fff transparent;
			top: 5px;
		}

		/*style the items (options), including the selected item:*/
		.WebViewContainer #playlist-controls #playlist-preview-locations .select-items div,
		.WebViewContainer #playlist-controls #playlist-preview-locations .select-selected {
			color: #ffffff;
			padding: 8px 40px;
			border-bottom: 1px solid rgba(255,255,255, 0.2);
			cursor: pointer;
			user-select: none;
		    font-size: 13px;
    		font-weight: normal;
		}
		.WebViewContainer #playlist-controls #playlist-preview-locations .select-selected {
			padding: 11px 0;
			border-bottom: none;
			white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		}

		/*style items (options):*/
		.WebViewContainer #playlist-controls #playlist-preview-locations .select-items {
			position: absolute;
			background-color: black;
			top: 100%;
			left: 0;
			right: 0;
			z-index: 99;
			max-height: 500px;
			overflow: auto;
		}

		/*hide the items when the select box is closed:*/
		.WebViewContainer #playlist-controls #playlist-preview-locations .select-hide {
			display: none;
		}

		.WebViewContainer #playlist-controls #playlist-preview-locations .select-items div:hover, 
		.WebViewContainer #playlist-controls #playlist-preview-locations .same-as-selected {
			color: #00FFFF !important;
		}
	.WebViewContainer #playlist-controls.hidden #playlist-preview-locations {
		opacity: 0 !important;
	}


	.WebViewContainer #playlist-controls #playlist-slides-menu {
		max-height: calc(100% - 61px);
		opacity: 1;
		background-color: rgba(0, 0, 0, 0);
		transition: opacity 0.5s, margin-top 0.5s;
		overflow: auto;
		margin-top: 5px;
		z-index: 0;
	}
	.WebViewContainer #playlist-controls #playlist-slides-menu::-webkit-scrollbar {
		width: 10px;
	}
	.WebViewContainer #playlist-controls #playlist-slides-menu::-webkit-scrollbar-track {
		background-color: black;
	}
	.WebViewContainer #playlist-controls #playlist-slides-menu::-webkit-scrollbar-thumb {
		background-color: #00FFFF;
		border-radius: 5px;
		border: 3px solid transparent;
    	background-clip: content-box;
	}
	.WebViewContainer #playlist-controls.hasPreviewLocations #playlist-slides-menu {
		max-height: calc(100% - 106px);
	}
	.WebViewContainer #playlist-controls #playlist-slides-menu.hidden {
		opacity: 0;
		margin-top: -100px;
	}
		.WebViewContainer #playlist-controls #playlist-slides-menu .playlistSlide {
			padding: 10px 40px;
			margin-bottom: 2px;
			background-color: rgba(0, 0, 0, 0.7);
			position: relative;
			cursor: pointer;
		}
		.WebViewContainer #playlist-controls #playlist-slides-menu .playlistSlide.hovered,
		.WebViewContainer #playlist-controls #playlist-slides-menu .playlistSlide.currentSlide {
			color: #00FFFF;
		}
			.WebViewContainer #playlist-controls #playlist-slides-menu .playlistSlide.hovered:before,
			.WebViewContainer #playlist-controls #playlist-slides-menu .playlistSlide.currentSlide:before {
				content: '';
				position: absolute;
				width: 20px;
				height: 100%;
				background-color: #00FFFF;
				top: 0;
				left: 0;
			}

			.WebViewContainer #playlist-controls #playlist-slides-menu .playlistSlideName {
				font-size: 18px;
			}
			.WebViewContainer #playlist-controls #playlist-slides-menu .playlistSlideDuration {
				font-weight: normal;
				font-size: 11px;
			}

.WebViewContainer .ExitWebViewPanel a {
	z-index: 5051;
}

#root .playlist-wrapper .playlist .playlist-header .playlist-header-text .playlist-header-name-and-preview .playlist-name span {
	font-family: "OpenSans-Bold" !important;
}
/* 202212_2000_task1853_PlaylistPhase2PlaylistPreviewWebview.css - ENDCSS */

/* STARTCSS - 202225_2004_task2117_AddAbilityToPreviewAndEditSlidesInThePlaylist.css */
.playlist-slide-error-alerts-menu {
	cursor: initial !important;
}
	.playlist-slide-error-alerts-menu .playlist-slide-icon {
		height: 16px;
		width: 16px;
		margin-right: 5px;
		align-self: flex-start;
		margin-top: 4px;
	}
	.playlist-slide-error-alerts-menu .playlist-slide-icon.error-icon {
		fill: #d72d20;
	}

/* CSSUPDATED: 202212221730 */
/* 202225_2004_task2117_AddAbilityToPreviewAndEditSlidesInThePlaylist.css - ENDCSS */

/* STARTCSS - 202225_2301_task2097_PlaylistWebviewChangeRequests.css */
.WebViewContainer #playlist-controls #playlist-preview-locations {
	background-color: rgb(0, 255, 255, 0.7);
}

.WebViewContainer #playlist-controls #playlist-slides-menu.hiddenInitially {
	opacity: 0;
	visibility: hidden;
}

.WebViewContainer #playlist-controls #playlist-header #playlist-header-slides-menu-opener:after {
    content: '+';
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 40px;
    background-color: initial;
}
.WebViewContainer #playlist-controls #playlist-header #playlist-header-slides-menu-opener.opening:after {
    content: '−';
}

/* CSSUPDATED: 202212201605 */
/* 202225_2301_task2097_PlaylistWebviewChangeRequests.css - ENDCSS */

/* STARTCSS - 202301_2001_task2493_ThePreviewAsDropdownWithinPlaylistPreviewIsHardToRead.css */
.WebViewContainer #playlist-controls #playlist-preview-locations {
	background-color: rgba(0, 0, 0, 0.7);
}

.WebViewContainer #playlist-controls #playlist-preview-locations .select-selected {
    color: rgba(0, 255, 255, 1);
}

/* CSSUPDATED: 202301111205 */
/* 202301_2001_task2493_ThePreviewAsDropdownWithinPlaylistPreviewIsHardToRead.css - ENDCSS */

/* STARTCSS - 202310_2001_task3257_ReactAppListOfInfobarsScreen.css */
#InformationBarContainer.HasThemeIcon {
    background-size: auto;
}

/* CSSUPDATED: 202328061300 */
/* 202310_2001_task3257_ReactAppListOfInfobarsScreen.css - ENDCSS */

/* STARTCSS - 202317_2002_task3327_NewSlideDesignTabUI.css */
#root .dropdown-theme2 .MuiSelect-select.MuiSelect-select {
  font-family: "OpenSans-Bold" !important;
}
.dropdown-theme2-item.MuiListItem-root {
  justify-content: center;
  font-family: "OpenSans-Bold" !important;
  color: #707070;
  margin: 5px 5px;
}
.dropdown-theme2-item.MuiListItem-root.Mui-selected,
.dropdown-theme2-item.MuiListItem-root.MuiListItem-button:hover {
  background-color: #ECECEC;
  border-radius: 18px;
  margin: 5px 5px;
}
.dropdown-theme2-item.MuiListItem-root.Mui-selected.Mui-focusVisible {
  background-color: #ECECEC;
}
.dropdown-theme2-item.MuiListItem-root.MuiListItem-button {
  transition: none;
}
.dropdown-theme2-item.MuiListItem-root.font-dropdown-item.HeadingFont {
  font-family: "HeadingFont", "OpenSans-Bold" !important;
}
.dropdown-theme2-item.MuiListItem-root.font-dropdown-item.BodyFont {
  font-family: "BodyFont", "OpenSans" !important;
}
.dropdown-theme2-item.MuiListItem-root.font-dropdown-item.AccentFont {
  font-family: "AccentFont", "OpenSans" !important;
}
.combo-icon-select-menu .MuiListItem-root {
  justify-content: center !important;
}

#root .font-dropdown .MuiSelect-root {
  font-family: inherit !important;
}

/* CSSUPDATED: 202305090930 */
/* 202317_2002_task3327_NewSlideDesignTabUI.css - ENDCSS */