/*
[Mobile device screen width]
Default		=	60em
iPad Air 2	=	50em
Sumsung S5	<=	40em
iPhone6		=	40em
iPhone6s	=	45em
*/

/************************************************************************************************************************************************************
	###  Responsive - Show & Hide  ###
************************************************************************************************************************************************************/

.JQMx-responsive-large-hide,
.JQMx-responsive-large-hide-block,
span.JQMx-responsive-large-hide,
a.JQMx-responsive-large-hide {
	display: none !important;
}
.JQMx-responsive-large-show {
	display: block !important;
}
.JQMx-responsive-large-show-block {
	display: block !important;
}
span.JQMx-responsive-large-show,
a.JQMx-responsive-large-show  {
	display: inline !important;
}

@media (max-width: 60em) 
{
	.JQMx-responsive-large-show,
	.JQMx-responsive-large-show-block
	span.JQMx-responsive-large-show,
	a.JQMx-responsive-large-show {
		display: none !important;
	}
	.JQMx-responsive-large-hide,
	.JQMx-responsive-large-hide-block {
		display: block !important;
	}
	span.JQMx-responsive-large-hide,
	a.JQMx-responsive-large-hide {
		display: inline !important;
	}
}

.JQMx-responsive-medium-hide,
.JQMx-responsive-medium-hide-block,
span.JQMx-responsive-medium-hide,
a.JQMx-responsive-medium-hide {
	display: none !important;
}
.JQMx-responsive-medium-show,
.JQMx-responsive-medium-show-block {
	display: block !important;
}
span.JQMx-responsive-medium-show,
a.JQMx-responsive-medium-show {
	display: inline !important;
}

@media (max-width: 40em) 
{
	.JQMx-responsive-medium-show,
	.JQMx-responsive-medium-show-block,
	span.JQMx-responsive-medium-show,
	a.JQMx-responsive-medium-show {
		display: none !important;
	}
	.JQMx-responsive-medium-hide, 
	.JQMx-responsive-medium-hide-block {
		display: block !important;
	}
	span.JQMx-responsive-medium-hide,
	a.JQMx-responsive-medium-hide {
		display: inline !important;
	}
}


/************************************************************************************************************************************************************
	###  UI icons  ###
************************************************************************************************************************************************************/

.ui-icon-tree1-collapsed:after { background-image: url("img/ui-icon-tree1-collapsed.png"); }
.ui-icon-tree1-expanded:after { background-image: url("img/ui-icon-tree1-expanded.png"); }
.ui-icon-light-dot-square:after { background-image: url("img/ui-icon-light-dot-square.png"); }
.ui-icon-check-light-dot:after { background-image: url("img/ui-icon-check-light-dot.png"); }
.ui-icon-check-tiny-dual:after { background-image: url("img/ui-icon-check-tiny-dual.png"); }
.ui-icon-folder-plus:after { background-image: url("img/ui-icon-folder-plus.png"); }


/************************************************************************************************************************************************************
	###  Square Icon  ###
************************************************************************************************************************************************************/

.JQMX-icon-square.ui-btn-icon-right:after
,.JQMX-icon-square.ui-btn-icon-notext:after
{
  -webkit-border-radius: 0 !important;
  border-radius: 0 !important;
}

/*
<li data-icon="check"><a class="JQMX-icon-square">Enabled</a></li>
*/

/************************************************************************************************************************************************************
	###  Button color  ###
************************************************************************************************************************************************************/

.ui-btn.JQMx-btn-text-red {
	color: #E11;
}

.ui-btn.JQMx-btn-text-red:hover {
	color: #F11;
}

.ui-btn.JQMx-btn-text-emp {
	color: darkblue;
}
.ui-btn.JQMx-btn-text-emp:hover {
	color: mediumblue;
}

/*
	<a class="ui-btn JQMx-btn-text-red">Delete</a>
	<a class="ui-btn JQMx-btn-text-emp">Process</a>
*/


/************************************************************************************************************************************************************
	###  Radio button description  ###
************************************************************************************************************************************************************/

.ui-radio .radio-description {
	font-weight: normal;
	color: GrayText;
	font-size: small;
}

/*
<input type="radio" id="optDesc_N" value="N" name="optDesc" />
<label for="optDesc_N">Has description <span class="radio-description">bla bla bla</span></label>
*/

/************************************************************************************************************************************************************
	###  field contain message panel  ###
************************************************************************************************************************************************************/

/*** Description ***/
.JQMx-field-contain-description-full-line,
.JQMx-field-contain-description {
	color: gray;
}

/*** Error message ***/
.JQMx-field-contain-error-msg
{
	margin-top: .5em;
	padding: .3em .8em;
	color: white;
	text-shadow: 0 1px 0px #254f7a;
	background-color: #D00; /*#800*/
	font-size: 1em;
	font-weight: normal;

}

/*** Information message ***/
.JQMx-field-contain-error-msg.information,
.JQMx-field-contain-error-msg.info {
	background-color: #6abdff;
}


/*** Warning message ***/
.JQMx-field-contain-error-msg.warning {
	background-color: #FA0;
}

/*** Hideable ***/
.JQMx-field-contain-error-msg.hideable {
	padding-left: .4em;
	cursor: pointer;
}

.JQMx-field-contain-error-msg.hideable::before {
	content: url(img/close-circle-white-16px.png);
	padding-right: .4em;
}

/*** (Responsive) ***/
.ui-field-contain .JQMx-field-contain-lines
{
	margin-top: .5em;
}

.JQMx-field-contain-lines,
.JQMx-field-contain-description,
.JQMx-field-contain-description-full-line,
.JQMx-field-contain-error-msg {
	clear: both;
	display: block;
}

@media (min-width: 28em) 
{
	.ui-field-contain .JQMx-field-contain-lines,
	.ui-field-contain .JQMx-field-contain-description,
	.ui-field-contain .JQMx-field-contain-error-msg
	{
		margin-left: 22%;
	}
}

/*
<div class="ui-field-contain">
	<label for="txtName">Enabled</label>
	<input type="text" id="txtName" />
	<div class="JQMx-field-contain-description">Description here</div>
	<div class="JQMx-field-contain-description-full-line">No wrap description</div>
	<div class="JQMx-field-contain-error-msg">Show error message here</div>
	<div class="JQMx-field-contain-error-msg warning">Show warning message here</div>
	<div class="JQMx-field-contain-error-msg hideable">Hideable message</div>
	<div class="JQMx-field-contain-lines">
		<input type="checkbox" id="chkEnabled" />
		<label for="chkEnabled">Enabled</label>
	</div>
</div>
*/


/************************************************************************************************************************************************************
	###  Auto-hide navigator panel  ###
************************************************************************************************************************************************************/
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-whenshow {
	display: none;
}
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-whenhide {
	display: block;
}
.JQMx-autohide-navpanel-page span.JQMx-autohide-navpanel-whenhide {
	display: inline;
}
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-panel .ui-listview > li .ui-collapsible-heading {
	margin: 0;
}
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-panel .ui-collapsible.ui-li-static {
	padding: 0;
	border: none !important;
}
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-panel .ui-collapsible + li > .ui-btn,
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-panel .ui-collapsible + .ui-collapsible > .ui-collapsible-heading > .ui-btn,
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-panel .ui-panel-inner > .ui-listview > li.ui-first-child .ui-btn {
	border-top: none !important;
}
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-panel .ui-listview .ui-listview .ui-btn {
	padding-left: 1.5em;
	color: #999;
}
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-panel .ui-listview .ui-listview .ui-btn.ui-btn-active {
	color: #fff;
}
.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-panel .ui-btn:after {
	opacity: .4;
	filter: Alpha(Opacity=40);
}

@media (min-width: 60em) 
{
	.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-whenhide {
		display: none;
	}
	.JQMx-autohide-navpanel-page span.JQMx-autohide-navpanel-whenhide {
		display: none;
	}
	.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-whenshow {
		display: block;
	}
	.JQMx-autohide-navpanel-page span.JQMx-autohide-navpanel-whenshow {
		display: inline;
	}
	.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-link.ui-btn {
		display: none;
	}
	.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-panel {
		visibility: visible;
		position: relative;
		left: 0;
		clip: initial;
		float: left;
		width: 25%;
		background: none;
		-webkit-transition: none !important;
		-moz-transition: none !important;
		transition: none !important;
		-webkit-transform: none !important;
		-moz-transform: none !important;
		transform: none !important;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		z-index: auto;
	}
	.JQMx-autohide-navpanel-page .JQMx-autohide-navpanel-content 
	{
		width: 70%;
		padding-left: 1%;
		padding-right: 2%;
		float: right;
	}
}


/************************************************************************************************************************************************************
	###  Listview Selector  ###
************************************************************************************************************************************************************/
.ui-listview.JQMx-listview-selector
{
}

.ui-listview.JQMx-listview-selector li.ui-li-divider
{
	cursor: pointer;
}
.ui-listview.JQMx-listview-selector .JQMx-listview-selector-content,
.ui-listview.JQMx-listview-selector .JQMx-listview-selector-content.ui-li-has-thumb img:first-child{
	margin-left: 2.5em;
}


.ui-listview li.ui-li-has-icon .JQMx-listview-selector-content
{
	position:relative;
}

.ui-listview div.JQMx-listview-selector-content > img.ui-li-icon
{
	position:absolute;
	left:-1.625em;
	top:.2em;
	max-height:1em;
	max-width:1em
}
.ui-listview.JQMx-listview-selector div.JQMx-listview-selector-checkbox-area
{
	margin-left: -2.5em;
	position: absolute;
	height: 100%;
	width: 2.5em;
}
.ui-listview.JQMx-listview-selector span.JQMx-listview-selector-checkbox
{
	position: absolute;
	left: .35em;
	top: 50%;
	margin-top: -0.9em;
	width: 1.5em;
	height: 1.5em;
	-webkit-border-radius: 2.25em;
	border-radius: 2.25em;
	cursor: pointer;
}
.ui-listview.JQMx-listview-selector .treeButtons span.JQMx-listview-selector-checkbox
{
	margin-left: -2.5em;
}

.ui-listview li.ui-li-has-icon .JQMx-listview-selector-content > p.ui-li-aside
{
	margin-top: -1em;
	margin-right: -1.3em;
}

 
/*** Theme A ***/
.ui-page-theme-a .ui-listview.JQMx-listview-selector span.JQMx-listview-selector-checkbox
{
	border: 2px solid #bbb;
}
.ui-page-theme-a .ui-listview.JQMx-listview-selector span.JQMx-listview-selector-checkbox-checked
{
	border: 2px solid white;
}
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected.JQMx-listview-selector-highlighted,
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected.JQMx-listview-selector-highlighted .ui-btn,
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected .JQMx-listview-selector-highlighted,
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected .JQMx-listview-selector-highlighted .ui-btn,
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected .JQMx-listview-selector-highlighted div.JQMx-listview-selector-checkbox-area
{
	background-color:		#3388cc /*{a-active-background-color}*/;
	color:					#fff /*{a-active-color}*/;
	text-shadow: 0 /*{a-active-shadow-x}*/ 1px /*{a-active-shadow-y}*/ 0 /*{a-active-shadow-radius}*/ #005599 /*{a-active-shadow-color}*/;
}

/*** Theme B ***/
.ui-page-theme-b .ui-listview.JQMx-listview-selector span.JQMx-listview-selector-checkbox
{
	border: 2px solid #444;
}
.ui-page-theme-b .ui-listview.JQMx-listview-selector span.JQMx-listview-selector-checkbox-checked
{
	border: 2px solid white;
}
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected.JQMx-listview-selector-highlighted,
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected.JQMx-listview-selector-highlighted .ui-btn,
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected .JQMx-listview-selector-highlighted,
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected .JQMx-listview-selector-highlighted .ui-btn,
.ui-page-theme-a .ui-listview.JQMx-listview-selector li.JQMx-listview-selector-selected .JQMx-listview-selector-highlighted div.JQMx-listview-selector-checkbox-area
{
	background-color: 		#22aadd /*{b-active-background-color}*/;
	color: 					#fff /*{b-active-color}*/;
	text-shadow: 0 /*{b-active-shadow-x}*/ 1px /*{b-active-shadow-y}*/ 0 /*{b-active-shadow-radius}*/ #0088bb /*{b-active-shadow-color}*/;
}

/************************************************************************************************************************************************************
	###  JQM's UI - Custom Width Responsive Grid  ###
************************************************************************************************************************************************************/

/* A 6040 */
.ui-grid-a6040l>.ui-block-a,
.ui-grid-a6040m>.ui-block-a
{
	width:60%;
	padding-right: .25em;
}
.ui-grid-a6040l>.ui-block-b,
.ui-grid-a6040m>.ui-block-b
{
	width:40%;
	padding-left: .25em;
}

/* A 4060 */
.ui-grid-a4060l>.ui-block-a,
.ui-grid-a4060m>.ui-block-a
{
	width:40%;
	padding-right: .25em;
}
.ui-grid-a4060l>.ui-block-b,
.ui-grid-a4060m>.ui-block-b
{
	width:60%;
	padding-left: .25em;
}

/* A 7030 */
.ui-grid-a7030l>.ui-block-a,
.ui-grid-a7030m>.ui-block-a
{
	width:70%;
	padding-right: .25em;
}
.ui-grid-a7030l>.ui-block-b,
.ui-grid-a7030m>.ui-block-b
{
	width:30%;
	padding-left: .25em;
}

/* A 3070 */
.ui-grid-a3070l>.ui-block-a,
.ui-grid-a3070m>.ui-block-a
{
	width:30%;
	padding-right: .25em;
}
.ui-grid-a3070l>.ui-block-b,
.ui-grid-a3070m>.ui-block-b
{
	width:70%;
	padding-left: .25em;
}

/* A 3367 */
.ui-grid-a3367l>.ui-block-a,
.ui-grid-a3367m>.ui-block-a
{
	width:33%;
	padding-right: .25em;
}
.ui-grid-a3367l>.ui-block-b,
.ui-grid-a3367m>.ui-block-b
{
	width:67%;
	padding-left: .25em;
}

@media (max-width: 60em) {
	.ui-grid-a6040l > .ui-block-a,
	.ui-grid-a6040l > .ui-block-b,
	.ui-grid-a6040l > .ui-block-c,
	.ui-grid-a6040l > .ui-block-d,
	.ui-grid-a6040l > .ui-block-e,
	.ui-grid-a4060l > .ui-block-a,
	.ui-grid-a4060l > .ui-block-b,
	.ui-grid-a4060l > .ui-block-c,
	.ui-grid-a4060l > .ui-block-d,
	.ui-grid-a4060l > .ui-block-e,
	.ui-grid-a7030l > .ui-block-a,
	.ui-grid-a7030l > .ui-block-b,
	.ui-grid-a7030l > .ui-block-c,
	.ui-grid-a7030l > .ui-block-d,
	.ui-grid-a7030l > .ui-block-e,
	.ui-grid-a3070l > .ui-block-a,
	.ui-grid-a3070l > .ui-block-b,
	.ui-grid-a3070l > .ui-block-c,
	.ui-grid-a3070l > .ui-block-d,
	.ui-grid-a3070l > .ui-block-e,
	.ui-grid-a3367l > .ui-block-a,
	.ui-grid-a3367l > .ui-block-b,
	.ui-grid-a3367l > .ui-block-c,
	.ui-grid-a3367l > .ui-block-d,
	.ui-grid-a3367l > .ui-block-e
	{
		padding: 0em;
		width: 100%; 
		float: none; 
	}
}

@media (max-width: 45em) {
	.ui-grid-a6040m > .ui-block-a,
	.ui-grid-a6040m > .ui-block-b,
	.ui-grid-a6040m > .ui-block-c,
	.ui-grid-a6040m > .ui-block-d,
	.ui-grid-a6040m > .ui-block-e,
	.ui-grid-a4060m > .ui-block-a,
	.ui-grid-a4060m > .ui-block-b,
	.ui-grid-a4060m > .ui-block-c,
	.ui-grid-a4060m > .ui-block-d,
	.ui-grid-a4060m > .ui-block-e,
	.ui-grid-a7030m > .ui-block-a,
	.ui-grid-a7030m > .ui-block-b,
	.ui-grid-a7030m > .ui-block-c,
	.ui-grid-a7030m > .ui-block-d,
	.ui-grid-a7030m > .ui-block-e,
	.ui-grid-a3070m > .ui-block-a,
	.ui-grid-a3070m > .ui-block-b,
	.ui-grid-a3070m > .ui-block-c,
	.ui-grid-a3070m > .ui-block-d,
	.ui-grid-a3070m > .ui-block-e,
	.ui-grid-a3367m > .ui-block-a,
	.ui-grid-a3367m > .ui-block-b,
	.ui-grid-a3367m > .ui-block-c,
	.ui-grid-a3367m > .ui-block-d,
	.ui-grid-a3367m > .ui-block-e
	{
		padding: 0em;
		width: 100%; 
		float: none; 
	}
}

/************************************************************************************************************************************************************
	###  Listview Treeview (version 1)  ###
************************************************************************************************************************************************************/

ul.JQMx-ul-treeview li.JQMx-ul-treeview-not-tranform
{
}

ul.JQMx-ul-treeview .ui-li-static.ui-collapsible > .ui-collapsible-heading,
ul.JQMx-ul-treeview .ui-li-static.ui-collapsible > .JQMx-listview-selector-content > .ui-collapsible-heading
{
    margin: 0;
}
ul.JQMx-ul-treeview .ui-li-static.ui-collapsible {
    padding: 0;
}
ul.JQMx-ul-treeview .ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
    border-top-width: 0;
}
ul.JQMx-ul-treeview .ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
ul.JQMx-ul-treeview .ui-li-static.ui-collapsible > .ui-collapsible-content {
    border-bottom-width: 0;
}

ul.JQMx-ul-treeview div.treeButtons
{
	position: relative;
}

ul.JQMx-ul-treeview .treeButtons h2,
ul.JQMx-ul-treeview .treeButtons h3
{
	margin: 0px;
	position:absolute;
	width: 2.5em;
	height: 100%;
	left: 0;
	top: 0;
}

ul.JQMx-ul-treeview div.treeButtons h2 a,
ul.JQMx-ul-treeview div.treeButtons h3 a
{
	position:absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 0;
	border-width: 0;
}

ul.JQMx-ul-treeview div.treeButtons a.treeLinkButton
{
	left: 2.5em;
	margin: 0 2.5em 0 0;
	text-align: left;
	padding-left: 0;
	border-width: 0;
}

ul.JQMx-ul-treeview div.treeButtons a.treeLinkButton.ui-li-has-icon
{
	padding-left: 1.5em;
}

ul.JQMx-ul-treeview li.JQMx-ul-treeview-not-tranform a.ui-li-has-thumb,
ul.JQMx-ul-treeview div.treeButtons a.treeLinkButton.ui-li-has-thumb,
ul.JQMx-ul-treeview div.treeButtons div.treeLinkStaticContent.ui-li-has-thumb
{
	min-height: 3.26em;
	padding-left: 6.25em;
}


ul.JQMx-ul-treeview li.JQMx-ul-treeview-not-tranform a.ui-li-has-thumb,
ul.JQMx-ul-treeview.JQMx-listview-selector li.JQMx-ul-treeview-not-tranform a.ui-li-has-thumb{
	padding-left: 8.8em;
}

ul.JQMx-ul-treeview.JQMx-listview-selector .JQMx-listview-selector-content.ui-li-has-thumb .treeLinkStaticContent img:first-child,
ul.JQMx-ul-treeview.JQMx-listview-selector .JQMx-listview-selector-content.ui-li-has-thumb a.ui-li-has-thumb img:first-child{
	margin-left: 0;
}

ul.JQMx-ul-treeview li.JQMx-ul-treeview-not-tranform a.ui-li-has-thumb img:first-child{
	padding-left: 2.5em;
}

ul.JQMx-ul-treeview li.JQMx-ul-treeview-not-tranform.ui-li-has-icon > h3 > a.ui-collapsible-heading-toggle,
ul.JQMx-ul-treeview.JQMx-listview-selector li.JQMx-ul-treeview-not-tranform.ui-li-has-icon > h3 > a.ui-collapsible-heading-toggle{
	padding-left: 4em;
}

ul.JQMx-ul-treeview div.treeButtons div.treeLinkStaticContent.ui-li-has-thumb
{
	position: relative;
	left: 2.5em;
}

ul.JQMx-ul-treeview li.ui-li-has-thumb p.ui-li-aside {
	margin-right: -3.25em;
}

ul.JQMx-ul-treeview div.treeButtons a.treeLinkButton img.ui-li-icon
{
	position: absolute;
	left: 0;
	top: 0.9em;
}

ul.JQMx-ul-treeview div.treeButtons a.ui-btn-icon-notext
{
	position:absolute;
	top: 0;
	right: 0;
	width: 2.5em;
	height: 100%;
	margin: 0;
	border-width: 0 0 0 1px;
}
ul.JQMx-ul-treeview div.treeLinkStaticContent
{
	padding-top: .7em;
	padding-bottom: .7em;
}

ul.JQMx-ul-treeview div.treeButtons.ui-li-has-alt a.ui-btn span.ui-li-count /* fix bug : Hidden count. */
{
	right: 4em;
}

ul.JQMx-ul-treeview a.ui-btn:first-child,
ul.JQMx-ul-treeview li.ui-li-static,
ul.JQMx-ul-treeview div.treeLinkStaticContent,
ul.JQMx-ul-treeview.JQMx-listview-selector li > a.ui-btn,
ul.JQMx-ul-treeview li.ui-li-has-thumb > img:first-child,
ul.JQMx-ul-treeview .JQMx-listview-selector-content.ui-li-has-thumb > img:first-child,
ul.JQMx-ul-treeview li.ui-li-has-thumb > a.ui-btn > img:first-child
{
	padding-left: 2.5em;
}

ul.JQMx-ul-treeview.JQMx-listview-selector li.ui-li-has-thumb > a.ui-btn:first-child
{
	padding-left: 6.5em;
}

ul.JQMx-ul-treeview li.ui-li-has-thumb > a.ui-btn
{
	padding-left: 8.75em;
}

ul.JQMx-ul-treeview li.ui-li-has-icon > a.ui-btn,
ul.JQMx-ul-treeview li.ui-li-static.ui-li-has-icon,
ul.JQMx-ul-treeview li.ui-li-has-icon div.treeLinkStaticContent
{
	padding-left: 4em;
}

ul.JQMx-ul-treeview.JQMx-listview-selector a.ui-btn:first-child,
ul.JQMx-ul-treeview.JQMx-listview-selector li.ui-li-static
{
	padding-left: 2.5em;
}

ul.JQMx-ul-treeview li.ui-li-static.ui-li-has-thumb
{
	padding-left: 8.8em;
}

ul.JQMx-ul-treeview li.ui-li-static.ui-collapsible
{
	padding-left: 0em;
}

ul.JQMx-ul-treeview.JQMx-listview-selector li.ui-li-static.ui-li-has-icon > .JQMx-listview-selector-content
{
	padding-left: 1.5em;
}


ul.JQMx-ul-treeview.JQMx-listview-selector li.ui-li-static.ui-li-has-icon.ui-collapsible > .JQMx-listview-selector-content,
ul.JQMx-ul-treeview.JQMx-listview-selector li.ui-li-static.ui-li-has-icon.ui-collapsible img.ui-li-icon
{
	padding-left: 0em;
}

ul.JQMx-ul-treeview li.ui-li-has-icon a.ui-btn:first-child img.ui-li-icon,
ul.JQMx-ul-treeview li.ui-li-static.ui-li-has-icon img.ui-li-icon,
ul.JQMx-ul-treeview li.ui-collapsible div.treeLinkStaticContent > img.ui-li-icon
{
	position: absolute;
	left: 2.5em;
}


ul.JQMx-ul-treeview li.ui-li-static.ui-li-has-icon div.JQMx-listview-selector-content > img.ui-li-icon
{
	left: -1.5em;
}
ul.JQMx-ul-treeview.JQMx-listview-selector li.ui-li-static.ui-li-has-icon div.JQMx-listview-selector-content > img.ui-li-icon
{
	left: 0;
}

ul.JQMx-ul-treeview a.ui-collapsible-heading-toggle-transparent
{
	background-color: transparent;
}

ul.JQMx-ul-treeview.JQMx-listview-selector li.ui-li-has-icon a.ui-btn img.ui-li-icon,
ul.JQMx-ul-treeview.JQMx-listview-selector li.ui-li-static.ui-li-has-icon .treeLinkStaticContent img.ui-li-icon
{
	left: 2.5em;
}
ul.JQMx-ul-treeview.JQMx-listview-selector li.ui-li-static.ui-li-has-icon img.ui-li-icon
{
	left: 0em;
}

ul.JQMx-ul-treeview li:not(.JQMx-ul-treeview-not-tranform) .ui-collapsible-content > :not(.ui-listview-inset).ui-listview > li.ui-first-child,
ul.JQMx-ul-treeview li:not(.JQMx-ul-treeview-not-tranform) .ui-collapsible-content > :not(.ui-listview-inset).ui-listview > li.ui-first-child > a.ui-btn
{
	border-top-width: 1px;
}

ul.JQMx-ul-treeview .ui-li-has-count > .ui-btn,
ul.JQMx-ul-treeview .ui-li-has-count.ui-li-static,
ul.JQMx-ul-treeview .ui-li-has-count.ui-li-divider
{
	padding-right: 0;
}

ul.JQMx-ul-treeview  li:not(.JQMx-ul-treeview-not-tranform) .ui-collapsible-content
{
	padding-left: 2.25em;
}

div.ui-page.ui-page-theme-a ul.JQMx-ul-treeview div.ui-collapsible-content
{
	background-color: #FBFBFB;
}


/************************************************************************************************************************************************************
	###  Listview  ###
************************************************************************************************************************************************************/

.ui-page-theme-a ul.ui-listview li.JQMx-listview-selector-highlighted,
.ui-page-theme-a ul.ui-listview li.JQMx-listview-selector-highlighted > .ui-btn,
.ui-page-theme-a ul.ui-listview li.JQMx-listview-selector-highlighted > div > .ui-btn,
.ui-page-theme-a ul.ui-listview li.JQMx-listview-selector-highlighted > div > h2 > .ui-btn,
.ui-page-theme-a ul.ui-listview li.JQMx-listview-selector-highlighted > div > h3 > .ui-btn
{
	background-color:		#3388cc /*{a-active-background-color}*/;
	color:					#fff /*{a-active-color}*/;
	text-shadow: 0 /*{a-active-shadow-x}*/ 1px /*{a-active-shadow-y}*/ 0 /*{a-active-shadow-radius}*/ #005599 /*{a-active-shadow-color}*/;
}


/************************************************************************************************************************************************************
	###  Listview - After  ###
************************************************************************************************************************************************************/

div.JQMx-after-listview
{
	margin-top: 1.05em;
}

div.JQMx-before-listview
{
	margin-top: -0.5em;
	margin-bottom: 1.5em;
}


/************************************************************************************************************************************************************
	###  Listview - Reduce hight  ###
************************************************************************************************************************************************************/

.ui-listview.JQMx-static-thin > li a:first-child,
.ui-listview.JQMx-static-thin > li.ui-collapsible > div.treeButtons > a
{
	padding-top: .4em;
	padding-bottom: .4em;
}
.ui-listview.JQMx-static-thin > li a p,
.ui-listview.JQMx-static-thin > li a p {
	margin-top: .2em;
	margin-bottom: 0;
}
.ui-listview.JQMx-static-thin > .ui-li-has-icon > img:first-child,
.ui-listview.JQMx-static-thin > .ui-li-has-icon > .ui-btn > img:first-child,
.ui-listview.JQMx-static-thin a > img:first-child,
.ui-listview.JQMx-static-thin a > .ui-btn > img:first-child,
.ui-listview.JQMx-static-thin > li.ui-collapsible > div.treeButtons > a img.ui-li-icon
{
	top: .5em;
}

/*
	<!-- Reduce hight of list view's items. -->
	<ul data-role="listview" class="JQMx-static-thin">
		<li></li>
		<li></li>
	</ul>
*/


/************************************************************************************************************************************************************
	###  Listview - Aside  ###
************************************************************************************************************************************************************/

.ui-listview.JQMx-all-aside-solid p.ui-li-aside {
	background-color: inherit;
}

@media (max-width: 40em) {
	.ui-listview.JQMx-all-aside-auto-move-down p.ui-li-aside {
		top: 2.5em;
	}
}

/*
	<!-- Solid aside background -->
	<ul data-role="listview" class="JQMx-all-aside-solid"></ul>

	<!-- Auto move aside down -->
	<ul data-role="listview" class="JQMx-all-aside-auto-move-down"></ul>
*/

/************************************************************************************************************************************************************
	###  Collapsible Left Menu  ###
************************************************************************************************************************************************************/

.ui-left-menu-collapsible-grid
{
	margin-top: -1em;
}

.ui-left-menu-collapsible-content {
	border-right: 0;
	border-left: 0;
	margin: 0 -15px 0;
}
.ui-left-menu-collapsible-content > .ui-collapsible {
	padding: 10px 15px;
}
.ui-left-menu-collapsible-content > .ui-collapsible-inset {
	margin: 0;
}
.ui-left-menu-collapsible-content > .ui-collapsible > .ui-collapsible-content {
	padding: 0;
	background: none;
}
.ui-left-menu-collapsible-content .ui-listview {
	margin: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

@media (min-width: 60em)
{
	.ui-left-menu-collapsible-grid
	{
		margin-left: -1em;
	}
	
	.ui-left-menu-collapsible-content > .ui-collapsible {
		margin: 0;
		padding: 0;
	}
	.ui-left-menu-collapsible-content > .ui-collapsible > .ui-collapsible-content {
		border-left: none;
		border-right: none;
	}
	
	/* fix up the collapsibles - expanded on desktop */
	.ui-left-menu-collapsible-content > .ui-collapsible-inset {
		margin-bottom: -1px;
	}
	.ui-left-menu-collapsible-content > .ui-collapsible > .ui-collapsible-heading {
		display: none;
	}
	.ui-left-menu-collapsible-content .ui-collapsible-contain {
		margin:0;
	}
	.ui-left-menu-collapsible-content > .ui-collapsible > .ui-collapsible-content {
		display: block;
		margin: 0;
		padding: 0;
	}
	.ui-left-menu-collapsible-content > .ui-collapsible > .ui-collapsible-content,
	.ui-left-menu-collapsible-content > .ui-collapsible > .ui-collapsible-content > .ui-listview .ui-li-last {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	/*.ui-left-menu-collapsible-content .ui-li-divider {
		padding-top: 1em;
		padding-bottom: 1em;
	}*/
	.ui-left-menu-collapsible-content {
		margin: 0;
		padding: 0;
	}
}


/************************************************************************************************************************************************************
	###  LI Collapsible List Items  ###
************************************************************************************************************************************************************/

li.JQMx-collapsible-list-items.ui-li-static.ui-collapsible > .ui-collapsible-heading {
		margin: 0;
}
li.JQMx-collapsible-list-items.ui-li-static.ui-collapsible .ui-collapsible-heading-toggle
{
	border-left: none;
	border-right: none;
}
li.JQMx-collapsible-list-items.ui-li-static.ui-collapsible,
li.JQMx-collapsible-list-items.ui-li-static.ui-collapsible .ui-collapsible-content {
	padding: 0;
}
li.JQMx-collapsible-list-items.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
	border-top-width: 0;
}
li.JQMx-collapsible-list-items.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
li.JQMx-collapsible-list-items.ui-li-static.ui-collapsible > .ui-collapsible-content {
	border-bottom-width: 0;
}


/************************************************************************************************************************************************************
	###  Popup context menu & Popup form  ###
************************************************************************************************************************************************************/

.ui-popup.popup-context-menu,
.ui-popup.popup-form-single-column {
	min-width: 17em;
}

@media (min-width: 23em) {
	.ui-popup.JQMX-popup-context-menu,
	.ui-popup.JQMX-popup-form-single-column {
		min-width: 21em;
	}
}

@media (min-width: 25em) {
	.ui-popup.JQMX-popup-context-menu,
	.ui-popup.JQMX-popup-form-single-column {
		min-width: 23em;
	}
}

@media (min-width: 30em) {
	.ui-popup.JQMX-popup-context-menu,
	.ui-popup.JQMX-popup-form-single-column {
		min-width: 27em;
	}
}

@media (min-width: 35em) {
	.ui-popup.JQMX-popup-form-single-column {
		min-width: 32em;
	}
}

@media (min-width: 40em) {
	.ui-popup.JQMX-popup-form-single-column {
		min-width: 35em;
	}
}

@media (min-width: 60em) {
	.ui-popup.JQMX-popup-form-single-column {
		min-width: 40em;
	}
}

/*
<div data-role="popup" data-arrow="true" class="JQMX-popup-context-menu">
	<div class="ui-content" role="main">
		<a class="ui-btn">Menu #1</a>
		...



<div data-role="popup" class="JQMX-popup-form-single-column">
	<div data-role="header">
		<h1>Popup Form</h1>
	</div>
	<div class="ui-content" role="main">
		<div class="ui-field-contain">
		...
*/

/************************************************************************************************************************************************************
	###  Dual Panes  ###
************************************************************************************************************************************************************/

.JQMx-dual-panes .pane-both
{
}

.JQMx-dual-panes .pane-left
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 33%;
	overflow-x: auto;
}
.JQMx-dual-panes .pane-right
{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 67%;
	overflow-x: auto;
}

.JQMx-dual-panes .pane-both-content
{
	padding: 1em;
}

@media (max-width: 60em) 
{
	.JQMx-dual-panes .pane-both
	{
		width: 100%;
	}
	.JQMx-dual-panes .pane-left
	{
		right: 0;
	}
	.JQMx-dual-panes .pane-right
	{
		display: none;
		left: 0;
		border-left: none;
		z-index: 2;
	}
}


/************************************************************************************************************************************************************
	###  Page / Center Form Content  ###
************************************************************************************************************************************************************/

@media (min-width: 50em) 
{
	div.JQMx-center-form-content
	{
		text-align: left;
		width: 40em;
		margin: 0 auto;
	}
}

/*
<div role="main" class="ui-content">
	<div class="JQMx-center-form-content">
*/


/************************************************************************************************************************************************************
	###  Page / Page as dialog  ###
************************************************************************************************************************************************************/

@media (min-width: 52em) 
{
	.ui-page.JQMx-page-as-dialog .JQMx-page-as-dialog-content,
	.ui-page.JQMx-page-as-dialog .ui-header,
	.ui-page.JQMx-page-as-dialog .ui-footer {
        margin: 0 auto;
	}

	.ui-page.JQMx-page-as-dialog .JQMx-page-as-dialog-content
	{
		width: 52em;
	}

	.ui-page.JQMx-page-as-dialog .ui-header,
	.ui-page.JQMx-page-as-dialog .ui-footer
	{
		width: 54em;
	}
}
/*
<div data-role="page" class="JQMx-page-as-dialog">
	<div role="main" class="ui-content">
		<div class="JQMx-page-as-dialog-content">
*/


/************************************************************************************************************************************************************
	###  Page / Page as dialog (dual column container) ###
************************************************************************************************************************************************************/

@media (min-width: 52em) {
	.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single:not(.ui-dialog) .JQMx-page-as-dialog-content,
	.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single:not(.ui-dialog) .ui-header,
	.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single:not(.ui-dialog) .ui-footer
	{
		margin: 0 auto;
	}

	.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single:not(.ui-dialog) .JQMx-page-as-dialog-content
	{
		width: 52em;
	}

	.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single:not(.ui-dialog) .ui-header,
	.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single:not(.ui-dialog) .ui-footer
	{
		width: 54em;
	}
}

@media (min-width: 80em) {
	.ui-page.JQMx-page-as-dialog-dual-column-container:not(.force-column-single) .JQMx-page-as-dialog-content
	{
		width: 80em;
		margin: 0 auto;
	}
}

.ui-page.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a>.ui-block-a
{
	padding-right: .25em;
}
.ui-page.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a>.ui-block-b
{
	padding-left: .25em;
}

@media (max-width: 80em) {
	.ui-page.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-a,
	.ui-page.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-b,
	.ui-page.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-c,
	.ui-page.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-d,
	.ui-page.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-e
	{
		padding: 0em;
		width: 100%;
		float: none; 
	}

	.ui-page.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a>.ui-block-a
	{
		padding-right: 0;
	}
	.ui-page.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a>.ui-block-b
	{
		padding-left: 0;
	}
}

.ui-dialog  .ui-page.JQMx-page-as-dialog-dual-column-container .ui-content
{
	width: 100%;
}

.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single .ui-content .ui-grid-a > .ui-block-a,
.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single .ui-content .ui-grid-a > .ui-block-b,
.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single .ui-content .ui-grid-a > .ui-block-c,
.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single .ui-content .ui-grid-a > .ui-block-d,
.ui-page.JQMx-page-as-dialog-dual-column-container.force-column-single .ui-content .ui-grid-a > .ui-block-e,
.ui-dialog.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-a,
.ui-dialog.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-b,
.ui-dialog.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-c,
.ui-dialog.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-d,
.ui-dialog.JQMx-page-as-dialog-dual-column-container .ui-content .ui-grid-a > .ui-block-e
{
	padding: 0em;
	width: 100%; 
	float: none; 
}


/************************************************************************************************************************************************************
	###  Page / Dual column container ###
************************************************************************************************************************************************************/

div.JQMx-page-dual-column-container .ui-grid-a>.ui-block-a
{
	padding-right: .25em;
}
div.JQMx-page-dual-column-container .ui-grid-a>.ui-block-b
{
	padding-left: .25em;
}

@media (max-width: 60em) {
	div.JQMx-page-dual-column-container .ui-grid-a > .ui-block-a,
	div.JQMx-page-dual-column-container .ui-grid-a > .ui-block-b,
	div.JQMx-page-dual-column-container .ui-grid-a > .ui-block-c,
	div.JQMx-page-dual-column-container .ui-grid-a > .ui-block-d,
	div.JQMx-page-dual-column-container .ui-grid-a > .ui-block-e
	{
		padding: 0em;
		width: 100%;
		float: none; 
	}

	div.JQMx-page-dual-column-container .ui-grid-a>.ui-block-a
	{
		padding-right: 0;
	}
	div.JQMx-page-dual-column-container .ui-grid-a>.ui-block-b
	{
		padding-left: 0;
	}
}

.ui-dialog  div.JQMx-page-dual-column-container
{
	width: 100%;
}