.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

.zView {
	/*position: absolute;*/
	width:100%;
	
}

/*******************************************
zButton
*******************************************/

.zButton {
  
   padding: 5.5px 10px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   
	color: #FFF;
	font-family: Helvetica, Arial, sans-serif;
	text-decoration: none;
	font-weight: bold;
	text-align: center; 
   text-decoration: none;
   vertical-align: middle;
   width: auto;
   cursor:pointer;
   }

.zButton.barbuttonitem {
   /*border: none;*/
   background: url(images/sprite.png);
   width: 28px;
   height: 28px;
   padding: 0;
   text-indent: -20000px;
   background-position: -2px;
   border-radius: 6px;
}

/*icons*/
.zButton.icon_edit {
	background-position: -28px;
}
.zButton.icon_delete {
	background-position: -130px;
}

.zButton.icon_sync {
	background-position: -62px;
}

.zButton.icon_save {
	background-position: -96px;
}
.zButton.icon_cancel {
	background-position: -128px;
}

.zButton.icon_action {
	background-position: -66px;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	
}

body.offline .zbutton#button_sync {
	opacity: 0.4;
}

.zButton.icon_add {
	background-position: -164px;
}
.znavigationbar .rightbuttonitems .zButton.icon_add {
	margin-right: 0;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.zButton.icon_add {
	}
}

.zButton.icon_settings {
	background-position: -192px;
}

.zButton.icon_logout {
	background-position: -227px;
}

.zButton.red {
	color: #aa0000;
}
.zButton.blue {
	color: white;
}



/*******************************************
zNavigationBar
*******************************************/
.znavigationbar {

}
.znavigationbar h1.ztitleview {
	margin: 0;
	padding: 0;
	line-height: 43px;
	text-align: center;
	color: #FFF;
	font-size: 20px;
}
.znavigationbar .backbuttonitem {
	position: absolute;
	left: 10px;
	top: 6px;
	width: auto;
}
.znavigationbar .backbuttonitem .zButton{
	float: left;
	margin-right: 10px;
}
.znavigationbar .rightbuttonitems {
	position: absolute;
	right: 10px;
	top: 6px;
}
.znavigationbar .rightbuttonitems .zButton {
	float: right;
	margin-left: 10px;
}

/*******************************************
zTableView
*******************************************/

.zView.ztableview {
	padding: 0;
	background: #FFF;
}
.ztableview.spacer {
	margin: 0;
}
.ztableview .ztableviewcontent {
	margin: 0px;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.ztableview.empty .ztableviewcontent {
	box-shadow: none;
	background: url(../../img/empty-table.png) center center no-repeat;
	height: 700px;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .ztableview.empty .ztableviewcontent {
        background: url(../../img/empty-table.png) center center no-repeat;
    }
    /* ... more 2x CSS rules ... */
}

.ztableviewcontent .ztableviewcell {
	clear: left;
	min-height: 45px;
	border-bottom: 1px solid #CCC;
	-webkit-user-select: none;
	background-color: #FFF !important;
}
.ztableviewcontent .ztableviewcell.pressed {
	background: -webkit-linear-gradient(top, #32b4ff, #32b4ff)
}
.ztableviewcontent .ztableviewcell.pressed.customdiv {
	background: transparent;
}
.ztableviewcontent .ztableviewcell.pressed.customdiv label {
	color: #222;
}
.ztableviewcontent .ztableviewcellcontent {
	padding: 0 25px 0 10px;
	overflow: hidden;
}
.ztableviewcellcontent.event {
	background-image: url(images/cog.png);
	background-position-x: 97%;
	background-position-y: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
.ztableviewcellcontent.disabled {
	cursor: not-allowed;
	color: #333;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .ztableviewcellcontent.event {
        background-image: url(images/cog_2x.png);
		background-size: 13px 14px;
    }
}
.ztableviewcellcontent.disclosure {
	background-image: url(images/chevron.png);
	background-position-x: 97%;
	background-position-y: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .ztableviewcellcontent.disclosure {
        background-image: url(images/chevron_2x.png);
		background-size: 9px 13px;
    }
}
.ztableviewcell.selected .ztableviewcellcontent.checkmark {
	background-image: url(images/258-checkmark.png);
	background-position-x: 97%;
	background-position-y: center;
	background-repeat: no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.ztableviewcell.selected .ztableviewcellcontent.checkmark {
		background-image: url(images/258-checkmark_2x.png);
		background-size: 19px 18px;
	}
}
.ztableviewcellcontent label {
	color: #000;
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	padding: 15px 0;
	display: block;
	cursor: pointer;
}
.ztableviewcellcontent.required label:before {
   content: "*";
}
.pressed .ztableviewcellcontent label {
	color: #FFF;
}
.ztableviewcellcontent.value label, 
.ztableviewcellcontent.formfield label,
.ztableviewcellcontent.checkbox label,
.ztableviewcellcontent.photofield label,
.ztableviewcellcontent.filefield label {
	width: 30%;
	margin-right: 5%;
	text-align: right;
	float: left;
	-webkit-user-select: none;
}
.ztableviewcellcontent.value value,
.ztableviewcellcontent.filefield value {
	width: 65%;
	display: block;
	float: left;
	line-height: 14px;
	font-size: 14px;
	padding: 14px 0 16px;
	height: 0;
	overflow-y: hidden;
}
.ztableviewcontent .form_field.select {
	background-image: url(images/chevron.png);
	background-position-x: 97%;
	background-position-y: center;
	background-repeat: no-repeat;
}
.ztableviewcontent .form_field label {
	width: 30%;
	margin-right: 5%;
	text-align: right;
	float: left;
	color: #000;
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	padding: 15px 0;
}
.ztableviewcellcontent.formfield input,
.ztableviewcellcontent.formfield input[type=text],
.ztableviewcellcontent.formfield input[type=password],
.ztableviewcellcontent.formfield input[type=phone],
.ztableviewcellcontent.formfield input[type=email],
.ztableviewcellcontent.formfield input[type=date],
.ztableviewcellcontent.formfield input[type=number] {
    padding: 0;
    line-height: 14px;
	font-size: 14px;
    border: none;
    color: #000;
    -webkit-appearance: none;
	height: 45px;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	width: 65%
}
.ztableviewcellcontent.formfield input.readonly,
.ztableviewcellcontent.formfield input[type=text].readonly,
.ztableviewcellcontent.formfield input[type=password].readonly,
.ztableviewcellcontent.formfield input[type=phone].readonly,
.ztableviewcellcontent.formfield input[type=email].readonly,
.ztableviewcellcontent.formfield input[type=date].readonly,
.ztableviewcellcontent.formfield input[type=number].readonly {
	color: #999;
}
textarea.ztextview {
	font-size: 14px;
	padding: 20px;
	
}
.zTableviewSectionHeader {
	margin: 0;
	padding: 3px 10px;
	border-bottom: 1px solid #CCC;
	background: #FDFDFD !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#FDFDFD) !important);
	background: -webkit-linear-gradient(top, #FDFDFD, #FDFDFD) !important;
	background: -moz-linear-gradient(top, #FDFDFD, #FDFDFD) !important;
	background: -ms-linear-gradient(top, #FDFDFD, #FDFDFD !important);
	background: -o-linear-gradient(top, #FDFDFD, #FDFDFD) !important;
	background-image: -ms-linear-gradient(top, #FDFDFD 0%, #FDFDFD 100%) !important;
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0 !important;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0 !important;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0 !important;
	-webkit-user-select: none;
}
.zTableviewSectionHeader label {
	font-size: 14px;
	font-weight: bold;
	color: #666;
	text-shadow: #fafbfb 0 1px 0;
}

/* Rounded corner tableview */
.zView.ztableview.grouped {
	padding: 0;
	background: transparent !important;
}
.ztableview.grouped .ztableviewcontent {
	padding: 20px;
}
.grouped .ztableviewcontent .ztableviewcell {
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
}
.grouped  .ztableviewcontent .ztableviewcell.first_in_section {
	border-top: 1px solid #CCC;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.grouped  .ztableviewcontent .ztableviewcell.last_in_section {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
}
.grouped  .ztableviewcontent .ztableviewcell.last_in_section.pressed {

}

.grouped .zTableviewSectionHeader {
	margin: 20px 0 10px;
	padding: 0;
	border-bottom: none;
	background: transparent !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}
.grouped .zTableviewSectionHeader label {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	text-shadow: #fafbfb 0 1px 0;
}
.grouped .zTableviewSectionHeader .section-description {
	font-size: 14px;
	color: #222;
	text-shadow: #ebebeb 0 1px 0;
}
/*******************************************
zSpinner
*******************************************/
.ZSpinner {
	background: #000 !important;	
	background:#000;
	color: #fff;
	opacity: 0.8;
	z-index: 999;
	position: absolute;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;

}
.ZSpinnercontent {
	position: relative;
}
.ZSpinner .spinnerIcon {
	width: 32px;
	height: 32px;
	background: url(../../img/loader.gif) no-repeat;
	margin: 80px auto;
}
.ZSpinner label {
	color: #FFF; 
	font-weight: bold;
	display: block;
	text-align: center;
}
/*******************************************
zAlert
*******************************************/
.ZAlert {
	background: #000 !important;	
	background:#000;
	color: #fff;
	opacity: 0.8;
	z-index: 999;
	position: absolute;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;

}
.ZAlertcontent {
	position: relative;
}

/*******************************************
zStatus
*******************************************/
.ZStatus {
	border-top: 1px solid #505050;
	background-color: black !important;
	opacity: 0.7;
	color: white;
}
.ZStatuscontent {
	position: relative;
}
.ZStatus label {
	color: #fff;
	display: block; 
	text-align: center;
}
.ZStatus label a, .ZStatus label a:visited{
	color: #fff;
} 
/*******************************************
zSwitch
*******************************************/
.zswitch {
    float: right;
    height: 28px;
    width: 77px;
	margin-top: 7px;
	cursor: pointer;
    /*
	border: 1px solid #979797;
    border-radius: 15px;
    margin-top: 7px;
    box-shadow: inset 0 1px 3px #BABABA, inset 0 12px 3px 2px rgba(232, 232, 232, 0.5);
    cursor: pointer;
    overflow: hidden;
	*/
}
.switch {
    height: 28px;
    width: 77px;    
/*    border-radius: 15px;
	overflow: hidden;
	background: #FFF;
	box-shadow: inset 0 1px 3px #BABABA, inset 0 12px 3px 2px rgba(232, 232, 232, 0.5);
    cursor: pointer;
    
	color: #777;*/
	position:relative;
}
.zswitch-inner {
	border: 1px solid #979797;
    border-radius: 15px;
	overflow: hidden;
	height: 28px;
	
}
.zswitch-button {
	-o-transition: all 0.125s ease-in-out;
    -webkit-transition: all 0.125s ease-in-out;
    -moz-transition: all 0.125s ease-in-out;
    -o-transform: translateX(0px);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translateX(0px);
	width: 77px;
	height: 28px;
	position:relative;
}
.onvalue {
	position: absolute;
	display: block;
    color: white;
    left: 0px;
	top:0px;
	width: 14px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
	padding: 6px 0 5px;
	background: #64B1F2;
	box-shadow: inset 0 1px 2px #0063B7, inset 0 12px 3px 2px rgba(0, 127, 234, 0.5);
	border-top-left-radius: 15px; 
	border-bottom-left-radius: 15px; 
}
.offvalue {
	position: absolute;
	display: block;
	width: 61px;
    color: #777;
    border: none;
    left: 14px;
	top: 0px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
	padding: 6px 0 5px;
	background: #FFF;
	box-shadow: inset 0 1px 3px #BABABA, inset 0 12px 3px 2px rgba(232, 232, 232, 0.5);
	border-top-right-radius: 15px; 
	border-bottom-right-radius: 15px;
}

.thumb {
	position:absolute;
    display: block;
    width: 28px;
    height: 28px;
    top: -1px;
    z-index: 3;
    border: solid 1px #919191;
    border-radius: 15px;
    box-shadow: inset 0 2px 1px white, inset 0 -2px 1px white;
    background-color: #CECECE;
    background-image: -webkit-linear-gradient(#CECECE, #FBFBFB);
    background-image: -moz-linear-gradient(#CECECE, #FBFBFB);
    background-image: -o-linear-gradient(#CECECE, #FBFBFB);
	left: -1px;
}
.zswitch.on .thumb {
	-webkit-transform: translate3d(47px,0,0);
    -o-transform: translateX(47px);
    -moz-transform: translateX(47px);
}
.zswitch.on .onvalue {
	width: 63px;
}
.zswitch.on .offvalue {
	width: 14px;
	overflow:hidden;
	left: 61px;
}

/*******************************************
zPhotoCell
*******************************************/
.zphotocell {
	width: 65%;
	float: left;
}
.zphotocell-inner {
	height: 100px;	
	margin: 5px 0;
	-webkit-user-select: none;                /* disable cut copy paste */
	-webkit-touch-callout: none;              /* disable callout, image save panel */
	-webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
}
.zphotocell.empty .zphotocell-inner {
	height: 44px;
}

/*******************************************
zFileCell
*******************************************/
.zfilecell {
	width: 65%;
	float: left;
}
.zfilecell-inner {
	height: 44px;	
	margin: 5px 0;
	-webkit-user-select: none;                /* disable cut copy paste */
	-webkit-touch-callout: none;              /* disable callout, image save panel */
	-webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
}
.zfilecell.empty .zfilecell-inner {
	height: 44px;
}

/*******************************************
Popover
*******************************************/

.zPopover {
	position: absolute;
	background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12px,#666666 25px,#474747 39px,#2c2c2c 50px,#000000 51px,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
	border: 4px solid #0c0e0f;
	border-radius: 5px;
	z-index: 2099;
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	box-shadow: 10px 10px 30px rgba(50, 50, 50, 0.85);
}

.zPopover-inner {
	border-radius: 5px;
}

.zPopover.transparent {
	opacity: 0;
}

.popover-arrow-border {
	border-color: transparent transparent #0c0e0f transparent;
	border-style: solid;
	border-width: 20px;
	height:0;
	width:0;
	position:absolute;
	top:-40px;
	left:30px;
}

.popover-arrow {
  border-color: transparent transparent #293740 transparent;
  border-style: solid;
  border-width: 14px;
  height:0;
  width:0;
  position:absolute;
  top:-28px;
  left:36px;
}
/*
.zPopover:after, .zPopover:before {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.zPopover:after {
	border-bottom-color:  #0c0e0f;
	border-width: 20px;
	left: 50%;
	margin-left: -20px;
}
.zPopover:before {
	border-bottom-color:  #0c0e0f;
	border-width: 26px;
	left: 50%;
	margin-left: -26px;
}
*/
/*******************************************
PAge Indicator
*******************************************/
.pageIndicator {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #666;
	opacity: .5;
}
.pageIndicator.active {
	opacity: 1;
}


/*******************************************
Modal Indicator
*******************************************/

.modal {
	position: absolute!important;
	width: 100%;
	height: 100%;
	/*activate the GPU for compositing each page */
	-webkit-transform: translate3d(0, 0, 0);
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
}
.stage-bottom {
	top: 100%;
}
.stage-center {
	top: 0;
	left: 0;
}
.stage-right {
	left: 100%;
}
.stage-left {
	right: -100%;
}



/*******************************************
zSearchBar
*******************************************/

.zSearchBar {
	position: relative;
	border-bottom: 1px solid #CCCCCC; 
	background: #FDFDFD;
	background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#D6D6D6));
	background: -webkit-linear-gradient(top, #FDFDFD, #D6D6D6);
	background: -moz-linear-gradient(top, #FDFDFD, #D6D6D6);
	background: -ms-linear-gradient(top, #FDFDFD, #D6D6D6);
	background: -o-linear-gradient(top, #FDFDFD, #D6D6D6);
	background-image: -ms-linear-gradient(top, #FDFDFD 0%, #D6D6D6 100%);
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	text-decoration: none;
	vertical-align: middle;
	width: auto;
	padding: 0 10px;
	height: 50px;
}
.zSearchBar input[type=search] {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	font-size: 14px;
	border-color: #999999;
}

/*******************************************
zAlertView
*******************************************/
.alertOverlay {
	background: rgba(70,70,70,0.4);
}
.zAlert {
	position: absolute;
	background: rgba(255, 255, 255, .8);
	border-radius: 5px;
	overflow: hidden;
}
.zAlert-inner {
	border-bottom: 1px solid #b4b4b4;
	padding: 5px;
}
.zAlert h4 {
	text-align: center;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	margin: 20px 0 10px;
	line-height: 12px;
}

.zAlert p {
	text-align: center;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}

.zAlert-button-row {
	
}
.zView.zButton.alertbutton {
	border: none;
	background: none;
	text-shadow: none;
	color: #007aff;
	font-weight: normal;
	width: 114px;
	border-radius: 0;
	border-right: 1px solid #b4b4b4;
	float: left;
	padding: 16px 10px;
}
.zView.zButton.alertbutton.default {
	font-weight: bold;
	border-right: none;
}