body{
  overflow:hidden;
}

.ui-page {
  -webkit-backface-visibility: hidden;
}
.ui-footer {
	text-align: center;
}

.err {
	color: red;
}

/* Set border of count bubble to red */
.warning-bubble {
	border-color: red;
}

/* Align icons inside label */
label.ui-input-text img,label.ui-select img {
	padding: 6px;
}

/* Icon style for menu */
.options-icon {
	width: 24px;
	height: 24px;
	border: none;
	display: inline-block;
	position: relative;
	text-decoration: none;
}

/* Styles for specific option item icons */
/* Need to check 
.img-messages{
	background: url(../images/messages.png) no-repeat;
}
.img-transactions{
	background: url(../images/transactions.png) no-repeat;
}
.img-settings{
	background: url(../images/settings.png) no-repeat;
}
.img-download{
	background: url(../images/download.png) no-repeat;
}*/
/* Notification bubble style */
span.bubble {
	padding: 3px;
	margin-left: -10px;
	line-height: 40px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid white;
	-webkit-box-shadow: 0px 1px 2px 0px #333;
	-webkit-border-radius: 10px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f3888b),
		to(#c90e17) );
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 12px;
}

/*custom icon style*/
.ui-icon-scan-btn { /*width: 30px!important; 
		height: 30px!important; 
		margin-left: -15px !important; */
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-webkit-border-radius: none !important;
	/*border-radius: none !important; */
	background: url(images/scanitem.png) 50% 50% no-repeat;
	/*background-size: 24px 16px; */
}

/*Header customization*/
@media all {
	.eyc-header-grid.ui-grid-b .ui-block-a {
		width: 30%;
	}
	.eyc-header-grid.ui-grid-b .ui-block-b {
		width: 40%;
	}
	.eyc-header-grid.ui-grid-b .ui-block-c {
		width: 30%;
	}
	.eyc-header-grid.ui-grid-c .ui-block-a {
		width: 20%;
	}
	.eyc-header-grid.ui-grid-c .ui-block-b {
		width: 30%;
	}
	.eyc-header-grid.ui-grid-c .ui-block-c {
		width: 30%;
	}
	.eyc-header-grid.ui-grid-c .ui-block-d {
		width: 20%;
	}
}

.eyc-title-site-wrapper {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	border: 1px solid #F1F1F1;
	clear: both;
	padding: 1px;
	margin-left: 3px;
	margin-right: 3px;
}
/* part: content */
div[data-role="content"] { /* some rules */
	
}

div[data-role="content"] .eycpanel-card {
	background-color: #fff;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	border-top-color: red;
	border-top-width: 5px;
	-webkit-box-shadow: 0 1px 2px #c4c4c4;
	box-shadow: 0 1px 2px #c4c4c4;
}

img{
		width: auto\9; /* ie8 */
		height: auto\9; /* ie8 */
}


div[data-role="content"] .eycpanel-card .ui-btn-active, div[data-role="content"] .eycpanel-card .ui-btn-down-none
	{
	background-image: none;
	background-color: transparent;
	/* border: none; problem in IE for select view in panelview*/ 
	text-shadow: none;
	opacity: 0.6;
}


div[data-role="content"] .eycpanel-card .ui-collapsible-content .tagline
	{
	margin-bottom: 0px;
	margin-top: 8px;
}

div[data-role="content"] .eycpanel-card.dodgerblue {
	border-top-color: dodgerblue;
}


.title-left-section {
	padding-left: 5px;
	padding-top: 3px;
	height: 33px;
	height: 40px;
}

.title-center-section {
	padding-top: 3px;
	height: 33px;
	text-align: center;
	height: 40px;
}

.title-right-section {
	padding-top: 3px;
	height: 33px;
	height: 40px;
}

.eyc-title {
	padding-top: 7px;
	font-size: 14px;
}

.nb { /*No Border*/
	border: none;
}

/*form validation*/
.w {
	clear: both;
	overflow: hidden;
}

.w span.validationMessage {
	background-color: #F1F1F1; /* CHANGED FOR GUA */
	text-align: center;
	display: block;
}

/* Validation */
.w.mandat {
	/* border-color: red; */
}

.w.mandat div.ui-input-text {
	/* border-color: red !important; */
}

.w.mandat div.ui-btn-corner-all {
	/* border-color: red !important; */
}

.w .nomandat {
	
}

.w.error {
	background-color: #EFD8D7;
}

.w.error span.ui-btn-inner{
	background-color: #EFD8D7 !important;
}

.w.error div.ui-input-text {
	border-color: #C8A5A5 !important;
	background: #FFCCCC !important;
}

.w .error span.validationMessage {
	padding: 5px;
}

.w.warning {
	background-color: #FCD50B;
}

.w.warning span.ui-btn-inner{
	background-color: #FCD50B !important;
}

.w.warning div.ui-input-text {
	border-color: #FDF877 !important;
	background: #FCD50B !important;
}

.w .warning span.validationMessage {
	padding: 5px;
}

.w .valid {
	
}

.list-seyc {
	
}


.list-seyc .ui-li .ui-btn-text a.ui-link-inherit, .seyc-text-span {
	word-wrap:break-word;
	overflow-wrap:break-word;
	white-space:normal !important;
	font-size :16px;
	
}

.list-seyc .ui-li-icon{
    max-height: 25px !important; 
    max-width: 25px !important;
}
/* .ui-li-static.ui-li-has-icon{
    padding-left:50px;
}
 */
.hideBlock{
  display:none !important;
}
.hideGroupBlock{
  display:none !important;
}
.hideSearchBlock{
  display:none !important;
}
.showSearchBlock{
  display:block !important;
}
.showBlock{
display:block !important;
}
.placeDivTemp{
height:15px;
}
.placeDivWidthHeigthTemp{
margin-left:-15px;
margin-right:-15px;
margin-top:-15px;
}

.placeDivWidthHeigthTempLR{
margin-left:-15px !important;
margin-right:-15px !important;
}

.placeTopTemp{
margin-top:-15px;
}

.placeMenuTopTemp{
margin-top:-35px;
}

.placeDownTemp{
margin-top:35px;
margin-bottom:35px;
}

/* for aligning plus/add button to center*/
li[data-icon="add"] span.ui-icon {
	width: 19px !important;
	height: 19px !important;
}


.offlineBackground {
	background: #CC0000 !important;
}

.offlineBackground .title-left-section {
	background: #CC0000 !important;
}

.offlineBackground .title-center-section {
	background: #CC0000 !important;
}

.offlineBackground .title-right-section {
	background: #CC0000 !important;
}


.badger-outter
	{
	background:#fff;
	border:1px solid #ccc;
	min-width: 18px;
	height: 19px;
	border-radius: 10px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	box-shadow:0px 1px 5px #ccc;
	-moz-box-shadow:0px 1px 5px #ccc;
	-webkit-box-shadow:0px 1px 5px #ccc;
	float:left;
	position:relative;
	z-index:9999;
	}
.badger-inner
	{
	min-width: 15px;
	height: 15px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background: #f13c31;
    margin:2px;
    z-index:99999;
	}
.badger-badge
	{
	color:#fff;
	padding:1px 2px;
	margin:0;
	text-align:center;
	text-shadow:0px -1px 1px #e01b0f;
	z-index:999999;
	font-size:11px;
	}
.badger-text
	{ font-size:9px; }
.badger-number
	{ font-size:11px; }

.ui-field-contain label.select{
			font-size: 16px;
			line-height: 1.4;
			display: block;
			font-weight: 400;
			margin: 0 0 .3em;  
}

@media all and (min-width:28em)
{.ui-field-contain label.select{vertical-align:top;display:inline-block;width:20%;margin:0.5em 2% 0 0}}

.ui-loader-background {
    width:100%;
    height:100%;
    top:0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:10000;
}

.ui-loading .ui-loader-background {
    display:block;
}

.ui-disabled-cell a {
	cursor: default !important;
	pointer-events: none;
}

.ui-disabled-cell {
	cursor: default !important;
	pointer-events: none;
}

.ui-seyc-btn-active {
	border: 1px solid #74BF43 !important /*{global-active-border}*/;
	background: #152F50 !important /*{global-active-background-color}*/;
	font-weight: bold!important;
	color: #FFFFFF!important /*{global-active-color}*/;
	cursor: pointer !important;
	text-shadow: none !important;
}

.ui-field-contain{
	border-bottom-style: none;
}

div.ui-filterable{
	padding-bottom: 3.5px;
}

.ui-content{
	border-width: 0;
	overflow: visible;
	overflow-x: hidden;
	padding: 1em 1em 1em 1em;
}

.ui-field-contain, .ui-mobile fieldset.ui-field-contain{
	padding: 0;
}

.ui-seyc-popup-btn{
	padding-bottom: 4px;
	padding-top: 3px;
	padding-left: 9px;
	padding-right: 9px;
}

.ui-seyc-popup-text{
	font-weight: bold;
	padding: 10px 10px 0px 10px;
	margin: 0;
}

@media (min-width: 28em){
.ui-field-contain > span > [class*="ui-"] {
		float: left;
		width: 78%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
}

.ui-header .seyc-transparent-background{
	background-color : transparent !important;
	border : 0;
}
.seyc-transparent-background:after{
	background-color : transparent !important;
	border : 0 !important;
}

.titleGOLD{
	padding-top : 20px;
	padding-bottom : 20px;
	color : White;
	/*font-weight : bold;*/
	font-size : 2em;
}

.titleGOLD small{
	display: block;
	font-size : 0.4em;
	font-family: 'Copperplate Gothic Light'
}

.bg-gold{
	background-color : #14CDB5;
	text-align: center;
}

/************************************************************************************************************************/

	/* made it 58 FOR REMA,First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
@media ( min-width : 58em ) {
	.my-page .ui-content {
		padding: .5625em; /* 9px */
	}
	
	/* A bit custom styling */
	.my-page .ui-listview li .ui-btn p {
        text-align : center;
		color: white;
	}

.my-page .seyc-text-span {
 
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
 
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
 
/* Safari, Opera, and Chrome */
display:-webkit-box !important;
-webkit-box-pack:center;
-webkit-box-align:center;
 
/* W3C */
display:box;
box-pack:center;
box-align:center;
               
}

	.my-page .ui-listview li .ui-btn .ui-li-aside {
		color: #eee;
	}
	
	.my-page .ui-listview li {
		float: left;
		width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
		height: 14.5em; /* 232p */
		margin: .5625em 1.2%;
	}
	.my-page .ui-listview li>.ui-btn {
		-webkit-box-sizing: border-box;
		/* include padding and border in height so we can set it to 100% */
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		height: 100%;
	}
	.my-page .ui-listview li.ui-li-has-thumb .ui-li-thumb {
		height: auto; /* To keep aspect ratio. */
		max-width: 100%;
		max-height: none;
	}
	/* Make all list items and anchors inherit the border-radius from the UL. */
	.my-page .ui-listview li,.my-page .ui-listview li .ui-btn,.my-page .ui-listview .ui-li-thumb
		{
		-webkit-border-radius: inherit;
		border-radius: inherit;
	} /* Hide the icon */
	.my-page .ui-listview .ui-btn-icon-right:after {
		display: none;
	} /* Make text wrap. */
	.my-page .ui-listview h2,.my-page .ui-listview p {
		white-space: normal;
		overflow: visible;
		position: absolute;
		left: 0;
		right: 0;
	} /* Text position */
	.my-page .ui-listview h2 {
		font-size: 1.25em;
		margin: 0;
		padding: .125em 1em;
		bottom: 50%;
	}
	.my-page .ui-listview p {
		font-size: 1em;
		margin: 0;
		padding: 0 1.25em;
		min-height: 50%;
		bottom: 0;
	}
	/* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */
	.ui-listview .ui-li-has-thumb h2,.ui-listview .ui-li-has-thumb p {
		background: #111;
		background: rgba(0, 0, 0, .8);
	}
	.ui-listview .ui-li-has-thumb h2 {
		bottom: 35%;
	}
	.ui-listview .ui-li-has-thumb p {
		min-height: 27%;
	}
	/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
	.my-page .ui-listview .ui-li-aside {
		padding: .125em .625em;
		width: auto;
		min-height: 0;
		top: 0;
		left: auto;
		bottom: auto; /* Custom styling. */
		background: #990099;
		background: rgba(153, 0, 153, .85);
		-webkit-border-top-right-radius: inherit;
		border-top-right-radius: inherit;
		-webkit-border-bottom-left-radius: inherit;
		border-bottom-left-radius: inherit;
		-webkit-border-bottom-right-radius: 0;
		border-bottom-right-radius: 0;
	} /* If you want to add shadow, don't kill the focus style. */
	.my-page .ui-listview li {
		-moz-box-shadow: 0px 0px 9px #111;
		-webkit-box-shadow: 0px 0px 9px #111;
		box-shadow: 0px 0px 9px #111;
	}
	
	.my-page .ui-listview li.ui-li-divider {
		width: 94.5%;
		height: auto;
		margin: .625em 1%;
	}
	
	/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
	.my-page .ui-listview li>.ui-btn:hover {
		-moz-box-shadow: 0px 0px 12px #33ccff;
		-webkit-box-shadow: 0px 0px 12px #33ccff;
		box-shadow: 0px 0px 12px #33ccff;
	} /* Animate focus and hover style, and resizing. */
	.my-page .ui-listview li,.my-page .ui-listview .ui-btn {
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		transition: all 500ms ease;
	}
	
	.my-page .ui-li-count{
		top : 10%;
		right : 1.2em;
	}
	
	.my-page .placeDivWidthHeigthTempLR{
		margin : 0 auto !important;
	}
	.my-page .ui-listview .ui-btn-icon-right .ui-li-count {
		right: 0;
	}
	.placeMenuTopTemp{
		margin-top:0px;
	}
}
	/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
@media ( min-width : 63.75em ) {
	.my-page .ui-content {
		padding: .625em; /* 10px */
	}
	
	/* A bit custom styling */
	.my-page .ui-listview li .ui-btn p {
		color: white;
        text-align : center;
	}

.my-page .seyc-text-span {
 
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
 
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
 
/* Safari, Opera, and Chrome */
display:-webkit-box !important;
-webkit-box-pack:center;
-webkit-box-align:center;
 
/* W3C */
display:box;
box-pack:center;
box-align:center;
               
}

	.my-page .ui-listview li .ui-btn .ui-li-aside {
		color: #eee;
	}
	
	/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.    By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
	.my-page .ui-listview {
		max-width: 62.5em; /* 1000px */
		margin: 0 auto;
	}
	/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),    but we stick to percentage values for demo purposes. */
	.my-page .ui-listview li {
		width: 23%;
		height: 230px;
		margin: .625em 1%;
	}
	
	
	.my-page .ui-listview li.ui-li-divider {
		width: 94.5%;
		height: auto;
		margin: .625em 1%;
	}
	
	.my-page .ui-li-count{
		top : 10%;
		right : 1.2em;
	}
	
	.my-page .placeDivWidthHeigthTempLR{
		margin : 0 auto !important;
	}
	
	.my-page .ui-listview .ui-btn-icon-right .ui-li-count {
		right: 0;
	}
	
	.placeMenuTopTemp{
		margin-top:0px;
	}
}
	/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */
.hideOnMobileWithSpace{
		visibility:hidden;
	}
@media ( min-width : 28em ) {	
	.hideOnMobileWithSpace{
		visibility:visible;
	}
	.hideOnMobileWithOutSpace{
		display:block;
	}
}

.ui-shadow {
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}

.ui-listview > li p{
	font-size : 16px;
}
.ui-listview > li p.ui-li-aside {
	font-size : 12.5px;
	font-weight: bold;
}