html {
	font-size: 100%;
}
html * {
	max-height: 1000000em;
}
body {
	/* font: normal 1em 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; */	
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-stretch: normal;
	line-height: normal;
	font-family: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
	margin: 0;
	font-size: 0.85rem;

}

/* Workaround for scrollbars appearing over a modal */
textarea {
	-webkit-transform: translateZ(0);	
}

body.overflow-hidden {
  /* when primary navigation is visible, the content in the background won't scroll */
  overflow: hidden;
}
textarea, input, select, .mobileselect .lb, #lnkCSV, .abutton  {
	margin: 1px 0.5ex;
	border: 1px solid rgb(169, 169, 169);
	padding: 2px 0.5ex;
	max-width: 80vw;
	font-family: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
	font-size: 0.85rem;
	vertical-align: middle;
}

.abutton {
	border: none;
	margin: 0;
	padding: 0;
}

/*.button {  font-weight: bold; padding: 3px; }*/
.listbox { }
.textbox { }

.section_heading { height: 2em; color: #224499; font-size: 1rem; font-weight: bold; }
.section_heading_table { border-width: 1px; border-color: #224499; border-style: solid; padding-left: 6px; }
/*.item { border: none; background-color: #ffffff; }*/
.item_label0 { color: #111; }
.item_label { background-color: #ffffff; color: #000000; padding: 8px; text-align: left; vertical-align: top;  }
.item_label_disabled { color: #99aaff; }

.warning { color: #990000; font-weight: bold; padding: 5px;  }
.instructions { font-size: 0.5rem ; font-style: italic; }
.required_marker { color : red; font-weight: bold; font-size: 1rem;}

.button_row { background-color: #224499; padding: 8px; }

/***  */ 
.heading_ul { border-width: 0px 1px 1px 0px; background-color: #224499; border-style: dashed; border-color: #666666; }
.heading_ur { border-width: 0px 0px 1px 0px; background-color: #9BAEE0; border-style: dashed; border-color: #666666; }
.heading_bl { border-width: 0px 1px 1px 0px; border-style: dashed; border-color: #666666; }
.heading_br { border-width: 0px 0px 1px 0px; border-style: dashed; border-color: #666666; }    

/***  */ 
.paginator .break { font-weight: normal; color: #036; padding: 0 0.5ex 0 0.5ex; }
.paginator .arrow { font-weight: normal; color: #111; text-decoration: none;  padding: 0 0.5ex 0 0.5ex;  }
.paginator .page { font-weight: bold; text-decoration: none; padding: 0 0.5em; }
.paginator .page a:visited, .paginator .page a, .paginator .arrow a:visited, .paginator .arrow a {
	color: #036;
}
.paginator .selected { font-weight: bold; color:#FFF; background-color: #dd6900; padding: 0 .5em; border: 1px; border-style: solid; }	
.cd-header {
	padding: 1em 1em 1ex 1em;
	background-color: #fff;
} 
nav {
	background-color: #D9DAF5;
	clear: both;
	text-align: left;
	margin: 0;
	padding: 4px 0;
	vertical-align: middle;
	border: 1px solid #BAD2F7;
	line-height: normal;	
}	

nav ul { margin: 0 0.5ex; padding: 0; }

nav ul.cd-primary-nav {
	margin: 0;
	list-style-type: none;
	color: #fff;
	/*padding: 0px 1ex;*/
}
nav ul.cd-primary-nav li {
	display: inline;
	margin: 0.5ex 0.25em;
}
nav ul.cd-primary-nav li.selected a  {
	color: #dd6900;
	background-color: #FFFFFF;
	border: 1px solid #BAD2F7;
	font-weight: bold;
}
ul.cd-primary-nav li a, ul.cd-primary-nav li a:visited {
	text-decoration: none;
	padding: 2px 0.5ex;
	color: #036;
	background-color: #D9DAF5;
	border: 1px solid #D9DAF5;
	font-weight: bold;
	display: inline-block;
}
nav img {
	vertical-align: middle;
	border: none;
	display: inline-block;
	padding: 0 4px;
	margin: 0px;
	height: 1.1em;	
}
nav ul.cd-primary-nav li.cd-label{
	display: none;
}
#main {
	border: none;
	margin: 0;
	padding: 0 1em;
	background-color: #FFF;
}
#main h1 {
	font-size: 1.2rem;/*1.5rem*/
	font-weight: bold;
	color: #111;
	padding: 0;
	margin: 1ex 0;
}
#main A IMG {
	border: none;
}
DIV.error { 
	background-color:#FF2020;
	border-top: 1px dotted rgb(187, 187, 187);
	border-bottom: 1px dotted rgb(187, 187, 187);
	padding: 0.5ex 1ex; margin: 1ex 0;
	/*width: 75%;		*/
	color: #FFF;
	}

/* Program Table */
#tblprg TD, #tblprg TR {
	padding: 0; border: none; margin: 0; border-collapse: collapse;
}

#tblprg .fw SELECT {
	/*max-width: 35vw;*/
}

#tblprg .fw .listbox {
	/*width: 20vw;*/
}

#tblprg .tdc {
	/*max-width: 15vw;*/
	text-align: center;
	padding: 0 1ex;
}

#tblprg .tdc input {
	/*max-width: 15vw;*/
	text-align: center;
}

#tblprg TR.odd {
	background-color: #F8F8F8;
}

#tblprg TR.even {
	background-color: #FFFFFF;
}	
	dl.wicon {
		width: 9em;
		height: 6em;
		text-align: center;
		padding: 0;
		float: left;
		margin: 0.5em;
	}
	.wicon dd {
    		text-align: center;
    		margin: 0;
    		padding: 0;
	}
	.wicon dt img {
    		vertical-align: middle;
    		border: none;
    		display: inline-block;
    		padding: 0;
    		margin: 5px;
    		height: 48px;
	}
	a:link, a:visited {
		text-decoration: none;
	}
	
	div.wwelcome {
		font-size: 1rem;
	}
	.wwelcome a, .wicon dd a, .form a {
    		text-decoration: none;
    		/*padding: 0.5ex;*/
    		color: #036;
    		font-weight: bold;
	}
	.wwelcome a:hover, .wicon dd a:hover, .wicon:hover dd a, .wicon dd.selected a, .form a:hover, .thumbnail a:hover 
	{
		/*color: #3B7EBB;*/
		color: #dd6900;
		/*background-color: #FFFFFF;*/
		/*border: 1px solid #BAD2F7;*/
		border: none;
		font-weight: bold;
	}

DIV.mosaicpaginator {
	/*border: 1px solid #CAE8EA;*/
	padding: 0.5ex 1ex; 
	margin: 1ex 0;
	/*color: #FFF;*/
	vertical-align: middle;	
	text-align: left;
}

DIV.mosaicpaginator  .paginator {
	/*display: inline-block;*/
}

DIV.mosaicheader { background: #CAE8EA;
	border-top: 1px dotted rgb(187, 187, 187);
	border-bottom: 1px dotted rgb(187, 187, 187);
	padding: 0.5ex 1ex;
	/*max-width: 80;*/
	margin: 1ex 0;
	color: #111;
	text-align: initial;
}

.mosaicheader A {
	padding: 2px 0.5ex;
	border: 1px dotted #036;
	margin: 0.25ex 0.25ex;
	white-space: nowrap;
	display: inline-block;
	color: #222;
}	

 .mosaic {
	width: 100%;
	/*text-align: center;*/
 }
 
 .mosaicitem {
	padding: 0.5ex;
	margin: 0.5ex;
	overflow: hidden;
	border: 0;
	width: 15em;
	min-height: 6em;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
}
 
 .mosaicimage {	 
	 border: 0;
	 margin-bottom: 0.5em;
	 padding: 0ex;
	 /*margin-left: 0.5ex;border: 1px solid #888; */
	 overflow: hidden;	 
	 /*width: 10.66em;*/
 }
 
 .mosaicimage IMG {
	vertical-align: middle;
	text-align: center;
	/*max-height: 90px;*/
	height: 6em;
	width: 10.666em;
	overflow: hidden;
	object-fit: contain;
	object-position: left;
	/*width: auto;
	max-width: 100%;
	*/			
 }
 
 /* inspired from http://www.brunildo.org/test/img_center.html */
 
 .wraptocenter {
    	/*display: table-cell;
    	text-align: center;*/
	vertical-align: middle;
	max-height: 135px;
	/*background: #EFEFEF;*/
	border: 0;
	overflow-x: hidden;
	overflow-y: hidden;	 
}
.wraptocenter * {
    vertical-align: middle;
}	
#main FORM {
	margin: 0 0.5ex;
}
DIV.filter {
	background-color: #EFEFEF;
	padding: 0.5ex 1ex;
	margin: 1ex 0;
	border-top: 1px dotted rgb(187, 187, 187);
    	overflow: hidden;
	min-width : 70%;
}
TABLE.filter {
	padding: 0;
	margin: 0;
	border: none;
}
TABLE.ruler {
	border: 1px solid #C1DAD7;
	border-collapse: collapse;
	margin: 1ex 0;
	min-width: 70%;
	table-layout: fixed;
}	
TABLE.ruler tr {
	background: #fff;
	color: #111;
	border: none;
}	
TABLE.ruler th {
	font-weight: bold;
	color: #4f6b72;
	border: 1px solid #C1DAD7;    		
	letter-spacing: 1px;
	text-align: left;
	padding: 6px 6px 6px 6px;
	background: #CAE8EA;
	word-wrap: break-word;
}
TABLE.ruler td {
	border: 1px solid #C1DAD7;
	padding: 4px 4px 4px 4px;
	vertical-align: middle;
	word-wrap: break-word;
}
TABLE TR.lineheader,  TABLE TR.ruled {
	display: none;
}
TABLE.noborder {
	padding: 0;
	margin: 0;
	border: none;
}
TABLE.noborder TD {
	vertical-align: middle;
	padding: 0;
	margin: 0;
	border: 0px;
}
IMG.middle {
	border: none;
	vertical-align: middle;
	margin-left: 1ex;
}
TABLE.form, #tblprg {
	/*margin: 1em 0;*/
	border-top: 1px dotted rgb(187, 187, 187);
	border-bottom: 1px dotted rgb(187, 187, 187);
	min-width : 50%;
}
	
DIV.info {
	background-color: #FFFFA0;
	border-top: 1px dotted rgb(187, 187, 187);
	border-bottom: 1px dotted rgb(187, 187, 187);
	padding: 0.5ex 1ex;
	margin: 1ex 0;
	min-width : 75%;
}
DIV.display {
	background-color: #B0E480;
	border-top: 1px dotted rgb(187, 187, 187);
	padding: 0.5ex 1ex;
	margin: 1ex 0;	
	min-width : 70%;
}
TD.smallfilter3 {
	background-color: #EFEFEF;
	padding: 0.5ex 1ex;
	margin: 1ex 0;
	border-top: 1px dotted rgb(187, 187, 187);
	border-left: none;
	border-right: none;
}
.button {
	/*font-size: 1rem;*/
	margin: .25em 0;
	vertical-align: middle; 
	border: 1px solid rgb(169, 169, 169);
	cursor: pointer;
	padding: .5em;
	font-weight: bold;	
}
.button_grayed {
	width: 5em;
	background-color: #FFFFFF;
	color: #ccc;
	font-weight: bold;
	border-width: 1px;
	border-style: solid;
	border-color: #111;
}
.button_selected {
	width: 5em;
	background-color: #D9DAF5;
	color: #111;
	font-weight: bold;
	border-width: 1px;
	border-style: solid;
	border-color: #111;
}
.button_unselected {
	width: 5em;
	background-color: #FFFFFF;
	color: #111;
	font-weight: bold;
	border-width: 1px;
	border-style: solid;
	border-color: #111;
}
.panelDefault { /*max-width: 60em;*/ background-color:#FFFFFF; border-color:#CCCCCC; border-width:1px; border-style: solid; /*overflow:auto;*/}

.panelExtended { background-color:#FFFFFF; border-color:#CCCCCC; border-width:1px; border-style: solid;}
.vh, .panelVHeaderCell {
	background-color: #CFCFCF;
	padding: 0px 2px 0px 2px;
 	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC;
	font-weight: bold;
}
.ec, .panelEmptyCell {
	white-space: nowrap;
	background-color: #EFEFEF;
	padding: 0px 1px 0px 2px;
}
.hh, .panelHHeaderCell {
	white-space: nowrap;
	background-color: #CFCFCF;
	padding: 0px 2px 0px 2px;
	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC;
	font-weight: bold;
}
.dc, .panelDataCell   {white-space: nowrap; background-color:#FFFFFF; padding: 0px 1px 0px 2px;  
			border-width:1px;border-style:solid; border-color:#000000; text-align:center;  }
			
.boxwrapper {  background-color:#EFEFEF;
border-top: 1px dotted #CCCCCC;
/*border-bottom: 1px dotted rgb(187, 187, 187);*/
padding: 0.5ex 1ex; margin: 1ex 0;
}

TD.formright {
	vertical-align: middle;
	padding: 1ex;
}
TD.formleft {
	text-align: right;
	vertical-align: middle;
	font-weight: bold;
	padding: 0.5ex;
		min-width: 10em;
}
TD.formbuttons {
	background-color: #EEE;
	border-top: 1px dotted rgb(187, 187, 187);
}	
.formbuttonright, .formbuttonleft {
	
	vertical-align: middle;
	padding: 5px;
	word-wrap: break-word;
	margin: 0.25ex 0;
}

.formbuttonright {
	float : right;
}

.formbuttonleft {
	float : left;
}
			
/****** **/
	#flash_upload_results { 
		color : #000000;
		/*font-size: 0.5rem;*/
		background-color:#FFFFFF;
		border-width:1px;
		border-style:solid; 
		border-color:#000000; 
	}
	
	.mobileselect > span {
		width: 100%
	}
	
	.mobileselect select {
		min-width: 20em;
	}
	
	.mobileselect .lb {
		overflow-y: scroll;
   		max-height: 18vw;
    		max-width: 20vw;
		/*border: 1px dotted rgb(187, 187, 187);*/
		padding:0;
		min-height: 6em !important;
		display: none;
	}
	
	.mobileselect .lb li {
		list-style-type: none;
		background-repeat: no-repeat; 
    		background-position: left center; 
		margin: 1ex;
	}
	.lb li input{
		margin-right: 1ex;
	}
	
	.mobilebutton {
		display: none;
	}

/***********************************************************************/
/*** Added for fixing table width having short columns( should be tested and approved with all ui elements): **/
  	
  	.blkcontainer {
  		display : block !important;
  		overflow: auto;
  	}	
  	
  	TABLE.ruler{
  		table-layout: auto;
  	}
  	
  	TABLE.multiview_full {
		width : auto;
		display: block;
		overflow-x: auto;
	}
	
	div.tblprgcls {
		overflow: auto;
	}
/* */	
	.filter-mobile {
		display: none;
	}
/* */


.filters .calendar-logo {
	vertical-align: middle;
	cursor: pointer;
}
.filters .calendar-logo .fa
{
	margin-right: .1em;
}

.filters .greater-than-equal:before{
	content: "\2265";
}

.filters .greater-than-equal{
	font-weight: bold;
	/*font-size: 2rem;*/
	vertical-align: middle;
	margin: .3em;
    	margin-left: 0;
}


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media screen and (max-width:1050px), screen and (max-device-width:1050px) {

	DIV.display, Div.filter,TABLE.form{
		/*width : 100%;	*/
	}
	TABLE.ruler{
		width : 100%;
	}
	
}

/*ipad portrait*/
@media only screen and (min-device-width:768px) and (max-device-width : 1024px) and (orientation : portrait) {
	
	
	.form, .form thead, .form tbody, .form th, .form tr, .form td, .form tfoot {		
		display: block;
		overflow: hidden;
	}
	TD.formleft, TD.formright 
	{
		text-align : left;
	}
	TABLE.ruler{
		width : 100%;
		overflow-x: scroll;
	}
	
	#tblprg, .multiview_full {
		width : auto;
		overflow-x: scroll;
	}
	
	DIV.display, Div.filter,TABLE.form, DIV.mosaicheader, DIV.mosaicpaginator{
		width : auto;	
	}
	DIV.mosaicitem {
		width : auto;
		text-align: center;		
	}
	DIV.mosaic {
		width: auto;
		background: #f5f5f5;
	}
	.wraptocenter {
		width : auto;		
		display : block;
		background : none;	
	}
	/*TABLE { 
		display : block;	
	}*/
	
}

@media screen and (max-width:767px), screen and (max-device-width : 767px) {	
	/*body {
		font-size: 1rem;
	}*/
	
	.mosaicimage IMG { 
		    object-position: right;
	}
	
	.desktopicon {
		display: none;
	}
	
	.mobilebutton {
		display: inline-block;
	}
	
	.abutton {
		margin: 0.5ex;
		border: 1px solid rgb(169, 169, 169);
		padding: 2px 0.5ex;
		max-width: 80vw;
		display: inline-block;
	}
	
	.cd-primary-nav ul li.selected a {
		background-color: initial;
    		border: none;
	}
		
	#main { 
		position: relative;	
		border: none;
		padding: 0 .5ex;
		background-color: #FFF;
	}
	.form, .form thead, .form tbody, .form th, .form tr, .form td, .form tfoot {
		display: block;
		overflow: hidden;
	}
	DIV.info {
		/*width : 100%;*/
	}
	TD.formleft, TD.formright 
	{
		text-align : left;
	}
		
	TD.formright input {
		display: inline-block;
	} 
	
	TD.formright .item input,TD.formright .spec input{
		width: 100%;
    		box-sizing: border-box;
    		-moz-box-sizing: border-box;
    		-webkit-box-sizing: border-box;
	}
	
	TD.formright .modal .filters input {
		width: initial;
	} 
	
	.item .imagepick-zone .modal .filters input[type="date"] {
		height: initial;
	}	
	
	.form tr {
		border-top: 1px dotted rgb(187, 187, 187);
	}
	 .form tr:first-child,  .form tr:last-child{
		border-top: none;
	}
	DIV.display, Div.filter,TABLE.form, DIV.mosaicheader {
		width : auto;	
	}
	DIV.mosaicpaginator {
		text-align: left;
	}
	DIV.mosaicitem {
		text-align: center;		
	}
	DIV.mosaic {
		width: auto;
		background: #f5f5f5;
	}
	.wraptocenter {
		height: auto;		
		display : block;
		background : none;
		text-align: inherit;	
	}
	.listbox option{
	    font-size: 0.8rem;
	}
	TABLE.filter, TABLE.filter tbody, TABLE.filter th, TABLE.filter tr, TABLE.filter td, TABLE.filter tfoot  {
		display: block;
		overflow: hidden;
	}
	
	TABLE.ruler {
		display: block;       		
		border: 0;
    	}
    	TABLE.ruler th {
      		display: none;
    	}	
	.ruler thead, .ruler tbody, .ruler th, .ruler tr, .ruler tfoot{ 
		display: block; 
	}
	
	.ruler thead tr:first-child  {
		display: none;
	}
	
	TABLE.ruler tr {
		margin: 1em 0;
    		border: 2px solid #ddd;
    		background-color: #FAFAFA;
    		padding: 0 .5em;	
	}	
	TABLE TR.lineheader { 
		display:block;		
		border: none;
		margin:0;
		padding: 0;
	}
	TABLE.ruler tr.noruler {	
		margin-bottom: 0;
    		border: none;	
	}
	TABLE.ruler tr.noruler td:last-child{
		border: 0;
		padding: 0;
	}
	TABLE.ruler tr.lineheader td:last-child, TABLE.ruler tr.ruled td:last-child{
		min-height:0;
		border: 0;
		padding: 0;	
	}
	TABLE.ruler td {
      		display: block;
      		text-align: right;
		border-bottom: none;
    		border-left: none;
    		border-right: none;
		min-height: 1em;	    	
	}
	TABLE.ruler TD .mosaicheader {
		text-align: initial;
		border: 0;
		margin: 0;
	}
	TABLE.ruler td:before { 
		content: attr(data-label); 
		float: left;
		font-weight: bold;
		text-align: left;	
	}
	
	TABLE.ruler td:first-child {
		border-top: 0;
	}
	TABLE.ruler td:last-child {
		border-bottom: 0;	
	}
	
	TABLE.multiview_full {
		width : auto;
		display: block;
		overflow-x: scroll;
	}

	#tblprg TR.odd, #tblprg TR.even {
		 border: 1px solid #CCCCCC;;
   		 margin: 1ex;
		 padding: 1ex;
		 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	}
	
	#tblprg .textbox {
    		/*max-width: 5em;*/
	}
	
	.treenav li {
		margin-left: -18px;
	}
	.resumable-list {
		padding-left: 2em;
	}
	
	.spec .controller {
		/*margin: .5em 0;*/
	}
	
	.selectfile .filter-mobile {
		display: block;
		background-color: rgba(217, 218, 245, 1);
		width: auto;
		text-align: center;
		padding: .25em;
		transition:all 1s ease-in-out;
		cursor: pointer; 
	}
	
	.selectfile .controls  {
		overflow: hidden;
		height: 0px;
		transform: translateY(-100%);
     		transform-origin: 50% 0;
     		-webkit-transition: all 1s ease-in-out;
    		-moz-transition: all 1s ease-in-out;
    		-o-transition: all 1s ease-in-out;
     		transition: all 1s ease-in-out;
	}
	
	.selectfile .controls.visible {
		overflow: initial;
		height: auto;
    		transform: translateY(0);
    	} 			
}

@media screen and (max-width:575px), screen and (max-device-width : 575px)  {
	
	#main { 
		margin-top: 4em;	
	}
	.form, .form thead, .form tbody, .form th, .form tr, .form td, .form tfoot {
		display: block;
	}

	/*DIV.mosaicitem {
		text-align: center;
		display : block ;
		padding: 0;
		margin: 0;
	}*/
	DIV.mosaicitem {
		text-align: center;
		display: block;
		padding: 0;
		margin: 0 .5em;
		max-width: 100% !important;
		float: none;
		border-top: 1px dashed;
		padding: .5em;
		width: initial;
    	}
	TABLE#tblprg, TABLE#tblprg tbody, TABLE#tblprg tr, TABLE#tblprg td, TABLE#tblprg tfoot {
		display: block; 
	}	
	TABLE#tblprg tr td span {
		/*display : inline-block;*/	
		padding: 2px;
	}
	
	TABLE#tblprg tr td .filters span.filters-search.hidden {
		display: none;
	}
	
	TABLE#tblprg tr td br {
		display: none;	
	}
	#tblprg .fw .listbox, TABLE.boxwrapper {
    		width: 100%;
			max-width: 100%;
			margin-left: 0;
			margin-right: 0;
	}
	.mobileselect .lb {
		height: 30vw;
		max-width: initial;
		display: block;
	}

	.mobileselect select {
		display: none;
	}
	
	.filters .calendar-logo {
    		padding: .6em .2em !important;
    	}
    	   	
	

/*********************************************************
	Menu For Mobile
**********************************************************/	
.cd-header {
  position: absolute;
  top: 0;
  left: 0;
  /*background: rgba(217, 218, 245, 1);*/
  height: 50px;
  width: 100%;
  z-index: 3;
  padding:0;		
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cd-logo{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.cd-primary-nav-trigger {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50px;
  background-color: #036;
}
.cd-primary-nav-trigger .cd-menu-text {
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  /* hide the text on small devices */
  display: none;
}
.cd-primary-nav-trigger .cd-menu-icon {
  /* this span is the central line of the menu icon */
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 18px;
  height: 2px;
  background-color: white;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  transition: background-color 0.3s;
  /* these are the upper and lower lines in the menu icon */
}
.cd-primary-nav-trigger .cd-menu-icon::before, .cd-primary-nav-trigger .cd-menu-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: white;
  right: 0;
  -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
  -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
  transition: transform .3s, top .3s, background-color 0s;
}
.cd-primary-nav-trigger .cd-menu-icon::before {
  top: -5px;
}
.cd-primary-nav-trigger .cd-menu-icon::after {
  top: 5px;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked {
  background-color: rgba(255, 255, 255, 0);
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before, .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  background-color: white;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  top: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}

nav ul.cd-primary-nav {
	margin-top: 0em;
}

.cd-primary-nav {
	font-size: 1.2rem;
  /* by default it's hidden - on top of the viewport */
  position: fixed;
  left: 0;
  top: 0;
  height : calc(100% - 50px);	
  width: 100%;
  /*background: rgba(217, 218, 245, 1);*/
  z-index: 2;
  text-align: center;
  padding: 50px 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: auto;	
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.cd-primary-nav li {
 
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: .2em 0;
  text-transform: capitalize;
}
.cd-primary-nav a {
  display: inline-block;
  padding: .4em 1em;
  border-radius: 0.25em;
  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.no-touchevents .cd-primary-nav a:hover {
  background-color: #e36767;
}
.cd-primary-nav .cd-label {
	display: none !important;
  color: #444;
  text-transform: uppercase;
  font-weight: 700;
  margin: 2.4em 0 .8em;
}
.cd-primary-nav.is-visible {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  background: rgba(217, 218, 245, 1);

}
.cd-primary-nav a img
{
    vertical-align: middle;
    display: inline-block;
    padding: 0;
    margin: 0px;
    height: 1em;
    padding-right: 0.5em;	
}	

nav ul.cd-primary-nav li,nav ul.cd-primary-nav li.cd-label  {
		display : block;
}
/**********************************************************/

}
@media screen and (max-width:375px), screen and (max-device-width : 375px)  {
	DIV.mosaicitem {
	 	float: initial;	
	}
	/*.mosaicheader A {
		padding:0;
	}*/
}

@media screen and (max-width:332px), screen and (max-device-width : 332px)  {	
	dl.wicon {
		width: initial;
		height: initial;
		float: initial;
		margin: .5em 0;
	}
	#main h1, div.wwelcome, #main h3 {
		text-align: center;
	}
}

.mosaicpaginator .buttons, .mosaicpaginator .pages {
	display: inline;
	vertical-align: middle;
	margin: 0 0.5ex;
	overflow-x: hidden;
}
.mosaicpaginator .buttons {
	display: inline-block;
}

nav li a span {
	vertical-align: middle;
}

#multiview_grid td {
	white-space: nowrap;
}

#lnkCSV {
	margin: 0.5ex;
	padding: 0.5ex;
	color: #036;
	display: inline-block;
	font-weight: bold;
}

.paginator span {
	display: inline-block;
	vertical-align: middle;
}

.empty {
	text-align: center !important;
	color: #888;
	font-style: italic;
	padding: 1em !important;
}

.normalkey a, .sortkey a {
	background: #efefef;
}

.sortkey a {
	background: #fff;
}

.abutton {
	color: #036;
}

/***************************************************************************************/
.notification{
	background-color: #FFFFA0;
	border: 1px dotted rgb(187, 187, 187);
	padding: 0.5em 1em;
	margin: 1em 0;
	min-width: 70%;
	font-weight: 600;
    	font-style: oblique;
}

.template {
	background-color: #eee;
}
.item {
	margin: 1ex 1ex 0;
	padding: 1ex;
	border: 1px dotted gray;
	background: #eee;
}
.item .controller button {
	margin: 1em .5em 0 0;
	border: 1px solid rgb(169, 169, 169);
	padding: .2em .8em;
	max-width: 80vw;
}


.add {
	border: 1px dotted gray;
	margin: 1em ;		
	padding: .25em 1.5em;
	font-weight: bold;
}
.spec  {
	border: 1px dotted gray;
	padding: 1ex;
	margin: 0 0 1em 0;	
	background: #eee;
}

.spec label, .spec input, .spec textarea {
	width: auto;
	max-width: 100%;
	margin: .25em 0;
	padding: initial;
}

.spec select {
    margin-left: 0;
}

.spec div[data-array] {
	margin: 1ex 0 0 0;
	border: 1px dotted gray;
	background: white;
}

.imagepick-zone .b-lazy.b-loaded {
	height: 9em;
	width: 16em;
	object-fit: contain;
	object-position: left;
}

.imagepick-zone a.click div.name
{
	max-width: 100%;
	word-wrap: break-word;
}

TD.formright .item input, TD.formright .item label, TD.formright .item textarea {
	display: block;	
}

.item label {
	display: block;	
	width: auto;
	margin: 1em 0 .2em 0;
}

.spec .item textarea {
	padding: 1ex;
	width:100%;
	height:100%; 
	box-sizing: border-box;         
	-moz-box-sizing: border-box;    
	-webkit-box-sizing: border-box;
}

.spec select {
	max-width: 100%;
}

.spec .pluraltitle {
	padding: 1ex 1ex 0;  
	font-weight: 600;
}

.spec .singularname {
	text-decoration: underline;	
}

.imagepick-zone {

}

td.formleft.spec {
	vertical-align: top-text;
} 

.imglabel {
	display: block; 
}

.controller {
	display: inline-block;
	float: right;
}

.singulartitle {
	display: inline-block;
	vertical-align: middle;
}

.item button.up, .item button.down, .item button.remove, .item button.duplicate {
	margin: 1ex;
	padding: .5em;
}

.item button.up {
	right : 20%;
}
.item button.down {
	right : 10%;
}

.item button.remove {
	right : 0;
}

.item button.duplicate {
	right : 0;
}
.item button.choose {
	margin-top: .25em;
}

.imagepick-zone .thumbnail {
	margin: 1em;
	display: inline-block;
	cursor: pointer;
	color: #036;
	font-weight: bold;
	width: 15em;
	vertical-align: top;
	min-height: 9em;
}

.imagepick-zone .thumbnail a.click {
	padding: 0;
}

.modal {
        position: fixed;
        display: block;
  	opacity: 1;
        /*font-family: Arial, Helvetica, sans-serif;*/
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,1);
/*      -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;*/
        -webkit-animation: display-block-transition .8s ease-in;
  	animation: display-block-transition .8s ease-in;
    }

.modal > div {
	/*padding: 3vh;*/
	border-radius: 1px;
    	position: relative;
    	max-width: 90vw;
	height:90vh;
    	margin: 5vh 5vw;
    	/*z-index: 1000;*/
    	background-color: lightgray;
    	overflow: auto;
    	display: flex;
    	flex-direction: column;
}

td.projspec{
	vertical-align: top
}

.template.buttons { display: none }



.template {
	display: none;
}

.modal.closed {
	display: none;
	opacity: 0;
}

.spec label {
	display: block;
	font-weight: bold;
}

@-webkit-keyframes display-block-transition {
  0% {
    	opacity: 0;
  }
}
@keyframes display-block-transition {
  0% {
    	opacity: 0;
  }
}

.imagepick-zone .modal .filters {
	padding: 1em;
	/*border: 1px solid lightgray;*/
	background-color: #B0E480;
	/*margin: 1vh 2vh;*/
	
}

.imagepick-zone .modal .filters > div {
	display: inline-block;
}

.imagepick-zone .modal .filters input[type=checkbox], .imagepick-zone .modal .filters input[type=radio]{
		display: none;
}

.imagepick-zone .modal .thumbnails {
	padding: 3vh;
	overflow: auto;
	max-height: 100%;
	
}

.imagepick-zone .modal .thumbnails .error-json {
	text-align: center;
	color: red;
	cursor: auto;
}

.imagepick-zone .modal .thumbnails i.fa-spinner, .imagepick-zone .modal .thumbnails .error-json {
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.imagepick-zone .modal .filters input {
	display: inline ;
	height: 1.9em;
	vertical-align: middle;
}

.imagepick-zone .modal .filters input[type="date"] {
	height: 1.5em;	
	margin : 0 1em;
}
.imagepick-zone .modal .filters label {
	display: inline !important;
	margin: .5em;
}
.imagepick-zone .modal .filters span.separator {
	font-weight: bold;
	margin: .3em;
}

@media screen and (max-width: 575px), screen and (max-device-width: 575px){
	#notification{
		text-align: center;
	}
	item button {
    		margin: .5em .5em 0 0;
	}
	.modal{
		//max-width: 80%;
		//margin-top: 2.5vh;
	}
}


video {
	max-width: 100%;
}

.spec div[data-array] {
	counter-reset: items;
}

.spec div.item {
	counter-increment: items;
}

.spec div.item span.singularname::after {
	content: " " counter(items);
}

/***********************************************************************/
.templatepreview {
	list-style: none;
	padding: 0;
}

.templatepreview li {
	display: inline-block;
	max-width: 27.5em;
	width: 29%;
	margin: .5em 1em;
	border: 1px dotted rgb(187, 187, 187); 
	padding-top: 1em;
    	vertical-align: text-top;
	
}

.templatepreview li img{
	max-width: 100%;
	height: 6em;
	width: 10.666em;
	object-fit: contain;
	object-position: left;
}

.videopreview_action {
	/*overflow: hidden;*/	
	padding: 1ex;
}

.videopreview_action a {
	float: right;
   	clear: right;
    	max-width: 80vw
}

.videopreview_action span {
	vertical-align : middle;
	/*float: left;*/
	margin: 1ex 0;
	line-height: 1.3;
	font-weight: bold;	
}

.videopreview_action .description {
	margin-left: 1em;
	white-space: pre-line;
}

.videopreview {
	position: relative;
	text-align: center;
}
.play_btn{
	background-color: rgba(128,128,128,0.5);
	color: white;
	/* font-size: 1.2rem; */
	border: none;
	letter-spacing: 0;
	text-transform: uppercase;
	line-height: 1.2;
	font-weight: bolder;
	/* letter-spacing: 0.15em; */
	display: inline-block;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	white-space: nowrap;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	padding: 0.5ex 1ex;
	border-radius: 0.5ex;
}
.play_btn:before{
	/*content:"\f01d";*/
	font-size: 3rem;
	padding-right: .25em;
	vertical-align: middle;
}

.play_btn:hover{	
	cursor: pointer;	
	opacity: 1;
}

.showvideo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*background: rgba(0,0,0,1);*/
}

.showvideo.modal > div {
	height: auto;
	background-color: black;
	max-width: initial; 
	text-align: center;
	position: relative;
	display: inline-block;
	max-height: 90vh;
	min-height: 20vh;
	overflow: hidden;
	align-items: center;
    	justify-content: center;
}
.showvideo.modal .swipebtn{ 
	position: absolute;
	background: black;
	border: 0;
	z-index: 999;
	opacity: .8;
	cursor: pointer;
	top: 47%;
}
.showvideo.modal .selectmediabtn {
	right: 1em;
	bottom: 1em;
	position: absolute;
	border: 1px dotted #eee;
	z-index: 999;
	opacity: .8;
	background-color: black;
	padding: 1em;
	display: inline-block;
	cursor: pointer;		
}
.showvideo.modal .selectmediabtn a.click {
	color: #eee;
	font-weight: bold;
}

.showvideo.modal .swipebtn.prev
{
	left: 1em;
}
.showvideo.modal .swipebtn.next
{
	right: 1em;
}
.showvideo.modal .swipebtn i.fa, .showvideo.modal .selectmediabtn i.fa
{
	color: #eee
}

.showvideo.modal .selectmediabtn i.fa:hover {
	color: #1565C0;
}
.modal audio {
	/* width: auto; */
	max-width: 100%;
	display: block;
	margin: auto;	
}

.modal img{
	margin: auto;	
	max-width: 100%;	
	max-height: 100%;
}

.showvideo.modal .preview_img {
	margin: auto;	
	max-width: 100%;
	max-height: 90vh;
	display:block;
	/*flex: 1;*/
	background-image: url('/assets/images/transparent-bg.png');/*url('transparent-bg.png');*/
    	background-repeat: repeat;
    	object-fit: contain;
}

.showvideo.modal .preview_img.invisible{
	display: none;
}

.showvideo.modal .fa.fa-file-audio-o {
	color: white;
}

.modal video {
	    max-height: 90vh;
	    margin: auto;
}

#bydate {
 	margin-left: 0;
	margin-right: 0;
}

#byname , #bydate{
	display: inline-block;
	
}

.filters .filters-search {
	display: inline;
	-webkit-animation: display-block-transition .8s ease-in;
  	animation: display-block-transition .8s ease-in;
}

.filters span.filters-search.hidden {
	display: none;
}

.filters .filters-search-date, .filters #filterByUsers {
	display: inline-block;
	margin-right: .3em;
}

#byname:focus , #bydate:focus{
	border: 2px solid rgb(196, 169, 169); 
}
.filters .fa.fa-search{
	display: inline-block;
}

.preview, .info_item_btn {
	cursor: pointer;
	margin-right: .5em;
}

.info_item_btn i {
	margin: 0;
}

.modal .info_items:hover  {
	color: initial;
}

.modal .info_items  {
	color: black;
	padding:.5em;
	margin-top: .5em;
	background-color: white;
}
.modal .info_items  dl {
	margin: 0;
	white-space: pre-line;
}

.modal .info_items  dl dt, .modal .info_items  dl dd {
	display: inline-block;
}

.modal .info_items  dl dd {
	font-weight: normal;
	margin-left: 1em;
}

/*
.modal .info_items span.info_title{
	font-weight: bold;
}

.modal .info_items span.info_value {
	font-weight: normal;
}
*/
.modal .preview:before {
	font-family: "FontAwesome";
	content: '\f04b';
	cursor: pointer;
	/*vertical-align: middle;*/
}

.modal .tags {
	background: #CAE8EA; 
	padding: 1em;
}

.modal .tags input[type=radio], .modal .tags input[type=checkbox] {
	display: none;
}

.modal .tags a {
	cursor: pointer;
	vertical-align: middle;
	/*padding: 1em 0 1em 1em;
	padding: 0.5em 0px 0.5em 0.5em;*/
	color: #036;
    	font-weight: bold;
	display: inline-block;
	padding: 0.5ex;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.modal .tags a:after {
	content: "\007C";
	color: black;
	margin-left: 1em;
}

.modal .tags a:last-child:after {
	content: "";
}

.modal .tags input[type=radio]:checked + a, .modal .tags input[type=checkbox]:checked + a  {
	color: #dd6900;
    	font-style: normal;
    	text-transform: uppercase;
}

.modal .tags input[type=checkbox]:disabled + a {
	cursor: default;
	text-decoration: none;
	color: grey;
	pointer-events: none;
}

.modal .tags .mobiletags {
	display: none;
}

.modal.selectfile .filters button {
	vertical-align: sub;
	/*border: 1px dotted gray;
	margin: 1em;
	padding: .25em 1.5em;
	font-weight: bold;
	cursor: pointer;*/
}

.modal.selectfile .uploadfile {
	display: none;
	padding: 1em;
	border-top: 1px dotted gray;
	-webkit-animation: display-block-transition .8s ease-in;
	animation: display-block-transition .8s ease-in;
	overflow: auto;
}

.modal.selectfile  .uploadfile.visible {
	display: block;
}

.modal.selectfile  .uploadfile i {
    margin: auto;
    display: block;
}
.modal.selectfile  .uploadfile input  {
	border: none;
	margin: auto;
}

@media screen and (max-width: 767px), screen and (max-device-width: 767px){
	
	.templatepreview li {
		width: 44%;
	}
	.play_btn{
		opacity: 1;
	}
	
	.imagepick-zone .modal .filters {
		/*padding: .2em 2em .2em .2em;*/
		/*text-align: center;*/
	}
		
	.filters .fa.fa-2x {
		/*font-size: 1.5rem;*/
	}	
	
	.modal .tags a {
		padding: 2px 0.5ex;
		border: 1px dotted #036;
		margin: 0.25ex 0.25ex;
		white-space: nowrap;
		display: inline-block;
	}
	
	.modal .tags a {
		display: none;
	} 
	
	.modal .tags .mobiletags {
    		display: inline-block;
	}
}

@media screen and (max-width: 575px), screen and (max-device-width: 575px) {
	.templatepreview li {
		max-width: 100%;
		width: 100%;
		margin: 1em 0;
	}
}

a.actionbutton {
	color: rgb(0,0,0);
	background: rgb(212, 221, 221);
	border: 1px solid rgb(169,169,169);	
	padding: 2px 0.5ex;
	display: inline-block;
	margin: 1ex 0;
}

.filters .fa, .preview_error .fa, .showvideo .fa {
	cursor: pointer;
	margin: .3em;
	vertical-align: middle;
}

input[type=checkbox] + i.fa, input[type=radio] + i.fa  {
	color: #ccc;
	transition: all 1s;
} 

input[type=checkbox]:checked + i.fa, input[type=radio]:checked + i.fa {
	color: #dd6900;
	font-style: normal;
} 

input[type=checkbox]:disabled + i.fa, input[type=radio]:disabled + i.fa, .fa-search.drunk {
	pointer-events: none;
	cursor: default;
	color: rgb(84, 84, 84);
} 

.modal.selectfile .filters button.uploadfile_btn {
	vertical-align: middle;
	margin-left: .6em;
}

.modal.selectfile .filters #usersSelect {
	/*margin-right: .6em;*/
}

.uploadfile_btn.active{
	color: white;
	background-color: #dd6900;
}

.invisible {
	display: none;
}

span.close {
	background: rgba(0, 0, 0, 0.5);
	color: white;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	/*width: 2em;*/
	text-decoration: none;
	font-weight: bold;
	/*border-radius: 1em;*/
	box-shadow: 1px 1px 3px #000;
	margin: 0;
	/*font-size: 1.2rem;*/
	z-index: 999;
	cursor: pointer;
}
.modal span.close i.fa {
	cursor: pointer;
	margin: .3em;
	vertical-align: middle;
}

/*
.close:before {
	font-family: "FontAwesome";
	content: "\f00d";
	font-size: 2rem;
	vertical-align: middle;
}
*/
.separator:before {
	content: "\007C";
	font-size: 2rem;
	vertical-align: middle;
}

.showvideo.modal  p.preview_error {
	background: #FFFFFF;
    	vertical-align: middle;
	color: red;
    	margin: 0 auto;
}

.showvideo.modal  p.preview_error a
{
	display: inline-block;
	font-size: 1rem;
	margin: .5em;
	vertical-align: middle;
	border: 1px solid rgb(169, 169, 169);
	cursor: pointer;
	padding: .25em .5em;
	background: green;
	color: white;
}

.showvideo.modal  p.preview_error a .fa {
	margin: 0;
} 

.gen {
	display: none !important;
}

/* */

.no-js .require-js, .js .require-js-error { display: none; }	

.thumbnails .thumbnails-slice {
	color: red;
	background: white;
	text-align: center;
	margin-bottom: 1em;
}

.thumbnails .thumbnails-slice i.fa {
	margin: 0 .3em;
    	vertical-align: middle; 
}

.thumbnails .thumbnail img.b-lazy {
	/*max-height: 150px;	*/	
	height: 9em;
	width: 16em;
	object-fit: contain;
	object-position: left;
}

.thumbnails .thumbnail .name {
	word-break: break-all;
	margin-bottom: .5em;
}

/* CSS Tree channels styles */

.treenav li 
{ 
	position: relative; 
	padding: .25em;
	list-style: none;
}
.treenav > ol {
	display: inline-block;
	margin-top: 0;
}
.treenav a {
	color: black;
	/*padding-left: 1em;*/
} 

.treenav li > ol {
    padding-top: .25em;
}
.treenav li.boundary{
	border: 1px dashed gray;
}

.treenav li label {
	/*cursor: pointer;*/
}

.treenav li input {
	position: absolute;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
	margin: 0;
}

.treenav li input:checked  + label + ol {
	display: block;
}

.treenav li input + label + ol  {
	display: none;
}

.treenav li input + label:before{
	font-family: "FontAwesome";
	content: '\f196';
	padding-right: 1em;
}

.treenav li input:checked + label:before{
	font-family: "FontAwesome";
	content: '\f147';
	padding-right: 1em;
}

.treenav li.leaf:before {
	font-family: "FontAwesome";
	content: '\f147' ;
    	color: gray;
    	padding-right: 1em;
}

.uploadbtn-blkcontainer {
	display: inline-block;
	vertical-align: sub;
}

.spinifdisabled:enabled > .fa.fa-spin {
	display: none;
}

/* >IE10 hack 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .mosaicimage img {
 	width: auto;
 	max-width: 10.66em;
 }
}
*/