input {
    -webkit-appearance: none;
    border-radius: 0;
}

body:not(.right880) .viewport {
	overflow-y: scroll !important;
	-webkit-overflow-scrolling: touch;
}

/* Alt icon color
-----------------------------------------------------------------------------------------------------------*/

.ui-icon-alt {
	background: 						#fff;
	background: 						rgba(255,255,255,.3);
	background: transparent /*{global-icon-disc}*/;
	background-image: url(images/icons-18-white.png);
	background-repeat: no-repeat;
}

/* HD/"retina" sprite
-----------------------------------------------------------------------------------------------------------*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {

	.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
	.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
	.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
	.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
	.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
		background-image: url(images/icons-36-black.png);
		-moz-background-size: 776px 18px;
		-o-background-size: 776px 18px;
		-webkit-background-size: 776px 18px;
		background-size: 776px 18px;
	}
	.ui-icon-alt {
		background-image: url(images/icons-36-white.png);
		-moz-background-size: 776px 18px;
		-o-background-size: 776px 18px;
		-webkit-background-size: 776px 18px;
		background-size: 776px 18px;
	}
}

@font-face {
	font-family: AvenirLTCom-Roman;
	src: url("/fonts/avenirltcom-roman-webfont.eot") /* EOT file for IE */
}
@font-face {
	font-family: AvenirLTCom-Roman;
	src: url("/fonts/avenirltcom-roman-webfont.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
	font-family: AvenirLTCom-Heavy;
	src: url("/fonts/avenirltcom-heavy-webfont.eot") /* EOT file for IE */
}
@font-face {
	font-family: AvenirLTCom-Heavy;
	src: url("/fonts/avenirltcom-heavy-webfont.ttf") /* TTF file for CSS3 browsers */
}

* {
	padding:			0px;
	margin:				0px;
}

html,body {
	font:				normal 10pt 'AvenirLTCom-Roman',verdana,helvetica;
}

body {
	display:			block;
	min-height: 		100%;
	text-transform:		lowercase;
}

b, strong {
	font-family: 		AvenirLTCom-Heavy;
	font-weight:		normal;
}

.ui-btn-up-a {
	border: 1px solid #ccc;
}

.ui-mobile, .ui-mobile .ui-page {
	min-height:				1px;
}

.viewport {
	position: 			absolute;
	left:				0;
	right:				0;
	top:				0;
	bottom:				0;
	overflow:			auto;
	background-color:	#EEEEEE;
}

.mainnav {
	overflow:			hidden;
	position:			fixed;
	top:				0;
	left:				-260px;
	min-height:			100%;
	width:				260px;
	display: 			none;
	background:			#202020;
	padding-top: 		43px;
}

.mainnav > ul {
	display: 			block !important;
}

.mainnav > ul > li {
	padding:			6px;
	border-bottom:		1px solid #000000;
	border-top:			1px solid #606060;
}

.mainnav > ul > li.active {
	background-color:	#EEEEEE;
}

.mainnav > ul > li > a {
  	display:			block;
	font-family:		"AvenirLTCom-Heavy";
	color:				#fff;
	text-decoration:	none;
}

.mainnav > ul > li.active > a {
	color:				#000;
}

.mainnav > ul > li > a > img {
	vertical-align:		middle;
	margin:				0px 5px 0px 0px;
}

#pull-to-refresh {
	width:				203px;
	padding:			0 14px 0 43px;
	text-align:			right;
	font-family:		"AvenirLTCom-Heavy";
	background:			#202020;
	color:				#fff;
}

.loginscreen {
	border:				solid 1px #AAAAAA;
	background-color:	#FFFFFF;
	padding:			10px;
	border-radius:		1em;
}

.mainlogo {
	margin:				0px auto;
	background:			transparent url(../images/layout/eo-logo-black-200.png);
	width:				200px;
	height:				82px;
}

.mainnavlogo {
	margin:				10px auto;
	background:			transparent url(../images/layout/eo-logo-200.png);
	width:				200px;
	height:				82px;
}

.ui-body-c, .ui-overlay-c {
	text-shadow: 		none;
}

.ui-header .ui-btn-icon-notext {
	padding:			3px;
	top:				4px;
}

.ui-header .ui-title, .ui-footer .ui-title {
	margin:				0.6em 50px 0.8em;
}

.ui-br {
	border:				none;
}

.ui-field-contain .ui-input-search {
	width:				100%;
}

.ui-btn-inner {
	border-top:			solid 1px transparent;
	font-size:			15px;
}

.ui-icon-eo-edit {
	background:			transparent url(../images/icons/eo-custom-18-white.png) 0 0 no-repeat;
}

.ui-icon-eo-kopy {
	background:			transparent url(../images/icons/copy.png) no-repeat;
}

.ui-icon-eo-pdf {
	background:			transparent url(../images/icons/eo-custom-18-white.png) -90px 0px no-repeat;
}

.ui-icon-eo-menu {
	background:			transparent url(../images/icons/eo-custom-18-white.png) -18px 0px no-repeat;
}

.ui-icon-eo-back {
	background:			transparent url(../images/icons/eo-custom-18-white.png) -72px 0px no-repeat;
}

.deletebtn {
	background:				#921313;
	border: 				1px solid #921313;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#a12727), to(#921313));
	background-image: -webkit-linear-gradient( #a12727, #921313);
	background-image:    -moz-linear-gradient( #a12727, #921313);
	background-image:     -ms-linear-gradient( #a12727, #921313);
	background-image:      -o-linear-gradient( #a12727, #921313);
	background-image:         linear-gradient( #a12727, #921313);
}


.mainnav-icon-178,
.mainnav-icon-10,
.mainnav-icon-191,
.mainnav-icon-160,
.mainnav-icon-182,
.mainnav-icon-179,
.mainnav-icon-781,
.mainnav-icon-254,
.mainnav-icon-782,

.mainnav-icon-190,
.mainnav-icon-193,
.mainnav-icon-501,
.mainnav-icon-184,
.mainnav-icon-315,
.mainnav-icon-576,
.mainnav-icon-783,
.mainnav-icon-784,
.mainnav-icon-785,
.mainnav-icon-440,
.mainnav-icon-867{
	width:				32px;
	height:				32px;
	background:			transparent url(../images/icons/eo-icons-menu-32x32.png?v=20160125) 0 0 no-repeat;
}

/* beheermodule */
.mainnav-icon-178 {
	background-position:	0px 0px;
}

/* agenda */
.mainnav-icon-10 {
	background-position:	-32px 0px;
}

/* instellingen */
.mainnav-icon-191 {
	background-position:	-64px 0px;
}

/* uitloggen */
.mainnav-icon-160 {
	background-position:	-96px 0px;
}

/* crm */
.mainnav-icon-182 {
	background-position:	-128px 0px;
}

/* projecten */
.mainnav-icon-254 {
	background-position:	-160px 0px;
}

/* financieel */
.mainnav-icon-179 {
	background-position:	-192px 0px;
}

/* fiateren */
.mainnav-icon-781 {
	background-position:	-224px 0px;
}

/* handel */
.mainnav-icon-782 {
	background-position:	-256px 0px;
}

/* personeel */
.mainnav-icon-190 {
	background-position:	-320px 0px;
}

/* website */
.mainnav-icon-193 {
	background-position:	-352px 0px;
}

/* email */
.mainnav-icon-501 {
	background-position:	-384px 0px;
}

/* dossier */
.mainnav-icon-184 {
	background-position:	-288px 0px;
}

/* auto's */
.mainnav-icon-315 {
	background-position:	-480px 0px;
}

/* vastgoed */
.mainnav-icon-576 {
	background-position:	-512px 0px;
}

/* relatie */
.mainnav-icon-783 {
	background-position:	-576px 0px;
}

/* werknemer */
.mainnav-icon-784 {
	background-position:	-448px 0px;
}

/* maatwerk */
.mainnav-icon-785 {
	background-position:	-544px 0px;
}

/* support */
.mainnav-icon-440 {
	background-position:	-416px 0px;
}

/* recreatie */
.mainnav-icon-867 {
	background-position:	-608px 0px;
}

.messbox {
	position:				relative;
	padding:				10px;
	background:				#CCCCCC;
	text-shadow:			none;
	z-index: 				99;
}

.messbox.error {
	background:				#fdd5ce;
	border:					1px solid #d8000c;
	border-top:				none;
	color:					#d8000c;
}
.messbox.success {
	background:				#edfced;
	border:					1px solid #64992e;
	border-top:				none;
	color:					#64992e;
}

.messbox.error > img {
	vertical-align:			middle;
	margin:					0 10px 0 0;
	background:				transparent url(images/icons-18-black.png) -72px 0px no-repeat;
	width:					18px;
	height:					18px;
}

.messbox.success > img {
	vertical-align:			middle;
	margin:					0 10px 0 0;
	background:				transparent url(images/icons-18-black.png) -252px 0px no-repeat;
	width:					18px;
	height:					18px;
}

/* ----------------- AGENDA AANPASSINGEN ----------------- */

.dhx_dayevents_event_item, .event_text, .event_title {
	text-shadow:			none;
}

.dhx_scheduler .dhx_all_segments,
.dhx_all_segments,
.dhx_scheduler .dhx_el_button input,
.dhx_scheduler .dhx_el_button.cancel input {
	-o-box-shadow:			none;
	-ms-box-shadow:			none;
	-moz-box-shadow:		none;
	-webkit-box-shadow:		none;
}

.dhx_el_label div {
	color:					#FFFFFF;
	text-shadow:			0 1px 0 #000000;
}

.dhx_el_imagebutton span {
	background:				#FFFFFF;
	font-size:				0px;
	line-height:			0px;
	padding:				9px 5px 5px;
	-moz-border-radius: 	.5em;
	-webkit-border-radius:	.5em;
	border-radius:			5px;
	margin:					7px 0 0 0;
}

.dhx_schedulerbar .dhx_el_segmented .segment_0, .dhx_schedulerbar .dhx_el_segmented .segment_1, .dhx_schedulerbar .dhx_el_segmented .segment_N {
	background:				#FFFFFF;
}

.dhx_schedulerbar .dhx_el_segmented .selected.segment_0, .dhx_schedulerbar .dhx_el_segmented .selected.segment_1, .dhx_schedulerbar .dhx_el_segmented .selected.segment_N {
	background:				#EEEEEE;
	color:					#202020;
	text-shadow:			none;
}

.dhx_cal_arrow {
	background:				#202020;
	font-size:				0px;
	line-height:			0px;
	padding:				9px 5px 5px;
	-moz-border-radius: 	5px;
	-webkit-border-radius:	5px;
	border-radius:			5px;
	margin:					6px 0 0 0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#000000));
	background-image: -webkit-linear-gradient( #202020, #000000);
	background-image:    -moz-linear-gradient( #202020, #000000);
	background-image:     -ms-linear-gradient( #202020, #000000);
	background-image:      -o-linear-gradient( #202020, #000000);
	background-image:         linear-gradient( #202020, #000000);
	height:					13px;
	width:					18px;
}

.dhx_cal_arrow:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#3e3e3e));
	background-image: -webkit-linear-gradient( #494949, #3e3e3e);
	background-image:    -moz-linear-gradient( #494949, #3e3e3e);
	background-image:     -ms-linear-gradient( #494949, #3e3e3e);
	background-image:      -o-linear-gradient( #494949, #3e3e3e);
	background-image:         linear-gradient( #494949, #3e3e3e);
}

.dhx_cal_arrow div {
	position:				relative;
	top:					-2px;
	left:					4px;
}

.eo-okbtn input[type=button] {
	padding:				0px;
}

.eo-back img {
	background:				transparent url(../images/icons/eo-custom-18-white.png) -72px 0px no-repeat;
	width:					18px;
	height:					18px;
}

.eo-back span {
	background:				#202020;
	margin-left:			5px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#000000));
	background-image: -webkit-linear-gradient( #202020, #000000);
	background-image:    -moz-linear-gradient( #202020, #000000);
	background-image:     -ms-linear-gradient( #202020, #000000);
	background-image:      -o-linear-gradient( #202020, #000000);
	background-image:         linear-gradient( #202020, #000000);
}

.eo-back span:hover {
	background:				#202020;
	margin-left:			5px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#3e3e3e));
	background-image: -webkit-linear-gradient( #494949, #3e3e3e);
	background-image:    -moz-linear-gradient( #494949, #3e3e3e);
	background-image:     -ms-linear-gradient( #494949, #3e3e3e);
	background-image:      -o-linear-gradient( #494949, #3e3e3e);
	background-image:         linear-gradient( #494949, #3e3e3e);
}

.eo-edit img {
	background:				transparent url(../images/icons/eo-custom-18-white.png) 0px 0px no-repeat;
	width:					18px;
	height:					18px;
}

.eo-edit span {
	background:				#202020;
	margin-right:			5px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#000000));
	background-image: -webkit-linear-gradient( #202020, #000000);
	background-image:    -moz-linear-gradient( #202020, #000000);
	background-image:     -ms-linear-gradient( #202020, #000000);
	background-image:      -o-linear-gradient( #202020, #000000);
	background-image:         linear-gradient( #202020, #000000);
}

.dhx_alert_head {
	background:				#7AA4A2;
	color:					#ffffff;
	font-weight:			bold;
	font-size:				16px;
	text-shadow:			0 1px 1px #202020;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#7AA4A2), to(#3C7A7A));
	background-image: -webkit-linear-gradient(#7AA4A2, #3C7A7A);
	background-image:    -moz-linear-gradient(#7AA4A2, #3C7A7A);
	background-image:     -ms-linear-gradient(#7AA4A2, #3C7A7A);
	background-image:      -o-linear-gradient(#7AA4A2, #3C7A7A);
	background-image:         linear-gradient(#7AA4A2, #3C7A7A);
}

.dhx_el_bigroundbutton input, .dhx_el_bigbutton input {
	font-family: 			AvenirLTCom-Roman,Helvetica,Arial,sans-serif;
	font-size:				16px;
	height:					40px;
	background:				#202020;
	border:					none;
	border-radius:			5px;
	border-radius:			0.5em 0.5em 0.5em 0.5em;
	color:					#ffffff;
	text-shadow:			none;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#000000));
	background-image: -webkit-linear-gradient( #202020, #000000);
	background-image:    -moz-linear-gradient( #202020, #000000);
	background-image:     -ms-linear-gradient( #202020, #000000);
	background-image:      -o-linear-gradient( #202020, #000000);
	background-image:         linear-gradient( #202020, #000000);
	-o-box-shadow:			none;
	-ms-box-shadow:			none;
	-moz-box-shadow:		none;
	-webkit-box-shadow:		none;
	text-transform:			lowercase;
}

.dhx_el_bigroundbutton input:hover, .dhx_el_bigbutton input:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#3e3e3e));
	background-image: -webkit-linear-gradient( #494949, #3e3e3e);
	background-image:    -moz-linear-gradient( #494949, #3e3e3e);
	background-image:     -ms-linear-gradient( #494949, #3e3e3e);
	background-image:      -o-linear-gradient( #494949, #3e3e3e);
	background-image:         linear-gradient( #494949, #3e3e3e);
}

.dhx_cal_prev_button div {
	background:				transparent url(images/dhtmlx-14-images.png) 0 -119px no-repeat;
}

.dhx_cal_next_button div {
	background:				transparent url(images/dhtmlx-14-images.png) 0 -133px no-repeat;
}

.maintogglebtn img {
	background:				transparent url(../images/icons/eo-custom-18-black.png) -18px 0px no-repeat;
	width:					18px;
	height:					18px;
}

.refresh img {
	background:				transparent url(images/icons-18-black.png) -324px 50% no-repeat;
	width:					18px;
	height:					18px;
}

.add img {
	background:				transparent url(images/icons-18-black.png) 0px 50% no-repeat;
	width:					18px;
	height:					18px;
}

.dhx_scheduler .dhx_topbar, .dhx_cal_month, .dhx_scheduler .dhx_cal_day_num.dhx_cal_selected_day {
	background:				#7AA4A2;
	border:					1px solid #B3B3B3;
	color:					#ffffff;
	font-weight:			bold;
	text-shadow:			0 1px 1px #202020;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#7AA4A2), to(#3C7A7A));
	background-image: -webkit-linear-gradient(#7AA4A2, #3C7A7A);
	background-image:    -moz-linear-gradient(#7AA4A2, #3C7A7A);
	background-image:     -ms-linear-gradient(#7AA4A2, #3C7A7A);
	background-image:      -o-linear-gradient(#7AA4A2, #3C7A7A);
	background-image:         linear-gradient(#7AA4A2, #3C7A7A);
}

.dhx_scheduler .dhx_el_button.cancel input, .dhx_scheduler .dhx_el_button input, .dhx_scheduler .dhx_touch.dhx_el_button.cancel input {
	background:				#202020;
	color:					#FFFFFF;
	text-shadow:			0 1px 0 #AAAAAA;
}

.dhx_el_button input:hover, .dhx_el_button.cancel input:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#3e3e3e));
	background-image: -webkit-linear-gradient( #494949, #3e3e3e);
	background-image:    -moz-linear-gradient( #494949, #3e3e3e);
	background-image:     -ms-linear-gradient( #494949, #3e3e3e);
	background-image:      -o-linear-gradient( #494949, #3e3e3e);
	background-image:         linear-gradient( #494949, #3e3e3e);
}

.dhx_schedulerbar {
	background:				#202020;
}

#project_agenda .dhx_el_formbutton.delete {
	display:				none;
}





.autocomplete-results .ui-li .ui-btn-text a.ui-link-inherit {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}




/* ----------------- High res afbeeldingen ----------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {

	.mainnav-icon-178, .mainnav-icon-10, .mainnav-icon-191, .mainnav-icon-160, .mainnav-icon-182, .mainnav-icon-179, .mainnav-icon-781, .mainnav-icon-254, .mainnav-icon-782,
	.mainnav-icon-190, .mainnav-icon-193, .mainnav-icon-501, .mainnav-icon-184, .mainnav-icon-315, .mainnav-icon-576, .mainnav-icon-783, .mainnav-icon-784, .mainnav-icon-785,
	.mainnav-icon-440, .mainnav-icon-867 {
		background-image: url(../images/icons/eo-icons-menu-64x64.png?v=20160125);
		-moz-background-size: 640px 32px;
		-o-background-size: 640px 32px;
		-webkit-background-size: 640px 32px;
		background-size: 640px 32px;
	}

	.ui-icon-eo-edit, .ui-icon-eo-pdf, .ui-icon-eo-menu, .ui-icon-eo-back,
	.eo-edit img, .eo-pdf img, .eo-back img {
		background-image: url(../images/icons/eo-custom-36-white.png);
		-moz-background-size: 108px 18px;
		-o-background-size: 108px 18px;
		-webkit-background-size: 108px 18px;
		background-size: 108px 18px;
	}

	.mainlogo {
		background-image: url(../images/layout/eo-logo-black-400.png);
		-moz-background-size: 200px 82px;
		-o-background-size: 200px 82px;
		-webkit-background-size: 200px 82px;
		background-size: 200px 82px;
	}

	.mainnavlogo {
		background-image: url(../images/layout/eo-logo-400.png);
		-moz-background-size: 200px 82px;
		-o-background-size: 200px 82px;
		-webkit-background-size: 200px 82px;
		background-size: 200px 82px;
	}

	.maintogglebtn img {
		background-image: url(../images/icons/eo-custom-36-black.png);
		-moz-background-size: 108px 18px;
		-o-background-size: 108px 18px;
		-webkit-background-size: 108px 18px;
		background-size: 108px 18px;
	}

	.refresh img, .add img {
		background-image: url(images/icons-36-black.png);
		-moz-background-size: 776px 18px;
		-o-background-size: 776px 18px;
		-webkit-background-size: 776px 18px;
		background-size: 776px 18px;
	}

	.touchscreen-back-desk {
		background-image: url(../images/icons/cash-desk-back-40.png);
		-moz-background-size: 40px 40px;
		-o-background-size: 40px 40px;
		-webkit-background-size: 40px 40px;
		background-size: 40px 40px;
	}

	.touchscreen-locations {
		background-image: url(../images/icons/cash-location.png);
		-moz-background-size: 40px 40px;
		-o-background-size: 40px 40px;
		-webkit-background-size: 40px 40px;
		background-size: 40px 40px;
	}

	.touchscreen-createperson {
		background-image: url(../images/icons/cash-create-person.png);
		-moz-background-size: 40px 40px;
		-o-background-size: 40px 40px;
		-webkit-background-size: 40px 40px;
		background-size: 40px 40px;
	}

	.table-button {
		background-image: url(../images/icons/cash-location.png);
		-moz-background-size: 40px 40px;
		-o-background-size: 40px 40px;
		-webkit-background-size: 40px 40px;
		background-size: 40px 40px;
	}

	.remove-button {
		background-image: url(../images/icons/cash-remove.png);
		-moz-background-size: 40px 40px;
		-o-background-size: 40px 40px;
		-webkit-background-size: 40px 40px;
		background-size: 40px 40px;
	}
}




/* Datewheel overlay */
.dw {
    min-width:170px;
    padding: 0 10px;
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 1121;
    color: #000;
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    text-shadow: none;
}
.dwi {
    position: static;
    margin: 5px;
    display: inline-block;
}
.dwwr {
    zoom: 1;
}
/* Datewheel overlay background */
.dwo {
    width: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1120;
    opacity: .7;
    filter:Alpha(Opacity=70);
}
/* Datewheel wheel container wrapper */
.dwc {
    float: left;
    margin: 0 2px 5px 2px;
    padding-top: 30px;
}
.dwcc {
    clear: both;
}
/* Datewheel label */
.dwl {
    /*margin: 0 2px;*/
    text-align: center;
    line-height: 30px;
    height: 30px;
    white-space: nowrap;
    position: absolute;
    top: -30px;
    width: 100%;
}
/* Datewheel value */
.dwv {
    padding: 10px 0;
    border-bottom: 1px solid #000;
}
/* Datewheel wheel container */
.dwrc {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.dwwc {
    margin: 0;
    padding: 0 2px;
    position: relative;
    background: #000;
    zoom:1;
}
/* Datewheel wheels */
.dwwl {
    margin: 4px 2px;
    position: relative;
    background: #888;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000),color-stop(0.35, #333),color-stop(0.50, #888),color-stop(0.65, #333),color-stop(1, #000));
    background: -moz-linear-gradient(#000 0%,#333 35%, #888 50%,#333 65%,#000 100%);
    background: -ms-linear-gradient(#000 0%,#333 35%, #888 50%,#333 65%,#000 100%);
    background: -o-linear-gradient(#000 0%,#333 35%, #888 50%,#333 65%,#000 100%);
}
.dww {
    margin: 0 2px;
    overflow: hidden;
    position: relative;
    /*top: -30px;*/
}
.dwsc .dww {
    color: #fff;
    background: #444;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000),color-stop(0.45, #444),color-stop(0.55, #444),color-stop(1, #000));
    background: -moz-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%);
    background: -ms-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%);
    background: -o-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%);
}
.dww ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /*display: block;
    width: 100%;*/
    position: relative;
    z-index: 2;
}
.dww li {
    list-style: none;
    margin: 0;
    padding: 0 5px;
    display: block;
    text-align: center;
    line-height: 40px;
    font-size: 26px;
    white-space: nowrap;
    text-shadow: 0 1px 1px #000;
    opacity: .3;
    filter: Alpha(Opacity=30);
}
/* Valid entry */
.dww li.dw-v {
    opacity: 1;
    filter: Alpha(Opacity=100);
}
/* Hidden entry */
.dww li.dw-h {
    visibility: hidden;
}
/* Wheel +/- buttons */
.dwwb {
    position: absolute;
    z-index: 4;
    left: 0;
    cursor: pointer;
    width: 100%;
    height: 40px;
    text-align: center;
    opacity: 1;
    -webkit-transition: opacity 0.2s linear;
}
.dwa .dwwb {
    opacity: 0;
}
.dwwbp {
    top: 0;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    font-size: 40px;
}
.dwwbm {
    bottom: 0;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    font-size: 32px;
    font-weight: bold;
}
.dwpm .dwwc {
    background: transparent;
}
.dwpm .dww {
    margin: -1px;
}
.dwpm .dww li {
    text-shadow: none;
}
.dwpm .dwwol {
    display: none;
}
/* Datewheel wheel overlay */
.dwwo {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000),color-stop(0.52, rgba(44,44,44,0)),color-stop(0.48, rgba(44,44,44,0)),color-stop(1, #000));
    background: -moz-linear-gradient(#000 0%,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000 100%);
    background: -ms-linear-gradient(#000 0%,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000 100%);
    background: -o-linear-gradient(#000 0%,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000 100%);
}
/* Background line */
.dwwol {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    margin-top: -1px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #555;
}
/* Datewheel button */
.dwbg .dwb {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    margin: 0 2px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-shadow:0 -1px 1px #000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius:5px;
    box-shadow:0 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
    color: #fff;
    background:#000;
    background:-webkit-gradient(linear,left bottom,left top,color-stop(0.5, #000),color-stop(0.5, #6e6e6e));
    background:-moz-linear-gradient(#6e6e6e 50%,#000 50%);
    background:-ms-linear-gradient(#6e6e6e 50%,#000 50%);
    background:-o-linear-gradient(#6e6e6e 50%,#000 50%);
}
/* Datewheel button container */
.dwbc {
    /*margin-top: 5px;*/
    padding: 5px 0;
    text-align: center;
    clear: both;
}
/* Datewheel button wrapper */
.dwbw {
    display: inline-block;
    width: 50%;
}
/* Hidden label */
.dwhl {
    padding-top: 10px;
}
.dwhl .dwl {
    display: none;
}
/* Backgrounds */
.dwbg {
    background: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.dwbg .dwpm .dww {
    color: #000;
    background: #fff;
    border: 1px solid #AAA;
}
.dwbg .dwwb {
    background: #ccc;
    color: #888;
    text-shadow: 0 -1px 1px #333;
    box-shadow: 0 0 5px #333;
    -webkit-box-shadow: 0 0 5px #333;
    -moz-box-shadow: 0 0 5px #333;
}
.dwbg .dwwbp {
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #bdbdbd),color-stop(1, #f7f7f7));
    background: -moz-linear-gradient(#f7f7f7,#bdbdbd);
    background: -ms-linear-gradient(#f7f7f7,#bdbdbd);
    background: -o-linear-gradient(#f7f7f7,#bdbdbd);
}
.dwbg .dwwbm {
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #f7f7f7),color-stop(1, #bdbdbd));
    background: -moz-linear-gradient(#bdbdbd,#f7f7f7);
    background: -ms-linear-gradient(#bdbdbd,#f7f7f7);
    background: -o-linear-gradient(#bdbdbd,#f7f7f7);
}
.dwbg .dwb-a {
    background:#3c7500;
    background:-webkit-gradient(linear,left bottom,left top,color-stop(0.5, #3c7500),color-stop(0.5, #94c840));
    background:-moz-linear-gradient(#94c840 50%,#3c7500 50%);
    background:-ms-linear-gradient(#94c840 50%,#3c7500 50%);
    background:-o-linear-gradient(#94c840 50%,#3c7500 50%);
}
.dwbg .dwwl .dwb-a {
    background:#3c7500;
    background:-webkit-gradient(linear,left bottom,left top,color-stop(0, #3c7500),color-stop(1, #94c840));
    background:-moz-linear-gradient(#94c840,#3c7500);
    background:-ms-linear-gradient(#94c840,#3c7500);
    background:-o-linear-gradient(#94c840,#3c7500);
}




/* jQuery Mobile Theme */
.jqm .dwo {
    background: none;
}
.jqm .dw {
    padding: 6px;
    z-index: 1123;
}
.jqm .dwv {
    position: static;
    width: auto;
    padding: .7em 15px .7em 15px;
    border: 0;
}
.jqm .dwwr {
    border: 0;
}
.jqm .dwpm .dwwo {
    background: none;
}
.jqm .dwc {
    margin: 0;
    padding: 30px 5px 5px 5px;
 }
.jqm .dwhl {
    padding: 5px;
}
.jqm .dwwb {
    margin: 0;
    border: 0;
}
.jqm .dwwb span {
    padding: 0;
}
.jqm .dwwbp .ui-btn-inner {
    font-size: 40px;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}
.jqm .dwwbm .ui-btn-inner {
    font-size: 32px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
.jqm .dwwbp span {
    font-weight: normal;
}
.jqm .dwbc .ui-btn {
    margin:.5em 5px;
}
.jqm .dwbc .ui-btn-inner {
    font-size:12px;
}

.table-selector{
	width: 120px;
	margin-left: 50px;
}

.table-selector .topbar-results{
	position: absolute;
	z-index: 999;
	max-height: 340px;
	overflow: auto;
}

.table-selector .autosuggestbtn {
	content: " ";
	position: absolute;
	width: 12px;
	height: 19px;
	display: block;
	background-image: url("../images/icons/cash-add-selector.png");
	right: 0px;
	top: 13px;
}

.controls {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 25px;
	width: auto;
}

.cash-options {
	float: right;
	height: 30px;
	width: 30px;
	margin-right: 3px;
	border-radius: 0.5em;
	background: #000000 url("../images/icons/cash-add-options_28.png") center center no-repeat;
	cursor: pointer;
}

.touchscreen-back-desk {
	float: right;
	height: 30px;
	width: 30px;
	margin-right: 3px;
	border-radius: 0.5em;
	background: #000000 url("../images/icons/cash-desk-back-20.png") center center no-repeat;
	cursor: pointer;
}

.touchscreen-locations {
	float: right;
	height: 30px;
	width: 30px;
	margin-right: 3px;
	border-radius: 0.5em;
	background: #000000 url("../images/icons/cash-location-16.png") center center no-repeat;
	cursor: pointer;
}

.touchscreen-createperson {
	float: right;
	height: 30px;
	width: 30px;
	margin-right: 3px;
	border-radius: 0.5em;
	background: #000000 url("../images/icons/cash-create-person-16.png") center center no-repeat;
	cursor: pointer;
}

#touchscreen-overlay {
	width: 100%;
	height: calc(100% - 50px);
	position: absolute;
	bottom: 0px;
	left: 0px;
	background-color: #f5f5f5;
}

#touchscreen-overlay > .title {
	position: relative;
	left: auto;
	text-align: center;
	width: auto;
	top: auto;
	right: auto;
	margin-bottom: 20px;
	margin-top: 8%;
}

#touchscreen-overlay.deskcheck > .desk-group,
#touchscreen-overlay.relation-overlay > .desk-options {
	position: relative;
	display: block;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

#touchscreen-overlay.relation-overlay > .desk-options {
	padding: 0 4px !important;
    width: calc(100% - 8px) !important;
}

#touchscreen-overlay.deskcheck > .desk-group > .desk-selector,
#touchscreen-overlay.relation-overlay > .desk-options > .desk-option
{
	background: #000;
	color: #FFF;
	margin: 0 10px 15px;
	display: inline-block;
	padding: 16px 16px;
	display: inline-block;
}

#touchscreen-overlay.relation-overlay > .desk-options > .row > .desk-option {
	position: relative;
   	margin: 0;
	background: #000;
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	font-size: 16px;
	display: inline-block;
	padding: 8px 5px;
    width: calc(100% - 10px);
}

#touchscreen-overlay.relation-overlay > .desk-options > .row > .desk-option > .remove-option {
	position: absolute;
	right: 5px;
	top: 6px;
	color: #ff0000;
	font-size: 28px;
	width: 25px;
	height: 25px;
	line-height: 21px;
	text-align: center;
}

#touchscreen-overlay.relation-overlay > .desk-options > .row > .products {
	background: rgb(210, 210, 210);
	max-height: 200px;
   	overflow-x: hidden;
	margin: 0 0 5px 0;
	padding: 6px 10px;
	font-size: 14px;
}



#touchscreen-overlay.relation-overlay > .desk-options > .row > .products > .item {
	display: block;
	border-bottom: 1px solid rgb(173, 173, 173);
   	padding: 5px 0;
}

#touchscreen-overlay.relation-overlay > .desk-options > .row > .products > .item > div {
	display: inline-block;
	vertical-align: top;
}

#touchscreen-overlay.relation-overlay > .desk-options > .row > .products > .item > .amount {
	text-align: left;
	width: 10%;
}

#touchscreen-overlay.relation-overlay > .desk-options > .row > .products > .item > .description {
	text-align: left;
	width: 65%;
}

#touchscreen-overlay.relation-overlay > .desk-options > .row > .products > .item > .price {
	text-align: right;
	width: 25%;
}

#touchscreen-overlay > .no-desk {
	color: red;
}

.touchscreen {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin-top: 50px;
	font-size: 9pt;
}

.touchscreen > .top {
	position: absolute;
	top: 0px;
	height: 50%;
	width: 100%;
}

.touchscreen > .top > .rows {
	max-height: calc(100% - 65px);
	overflow: auto;
}


.touchscreen > .top > .rows > .row > .course_row {
    position: 			relative;
    width:				100%;
    height:				30px;
	line-height: 		30px;
    cursor:				pointer;
    clear: 				both;
	font-size: 			12px;
	text-align: 		center;
}

.touchscreen > .top > .rows > .row > .course_row:after {
    content: 			'';
    border-top:			1px dotted #000;
    position: 			absolute;
    left: 				0;
    z-index: 			0;
    top: 				50%;
    width: 				100%;
    height: 			1px;
}

.touchscreen > .top > .rows > .row > .course_row > span {
	background: 	#f9f9f9;
	padding: 		0 3px;
	position:		relative;
	z-index: 		1;
}

.touchscreen > .top > .rows > .row > .product_row {
	padding: 3px 10px;
}

.touchscreen > .top > .rows > .row > .product_row:after {
	content: " ";
	display: table;
	clear:	both;
}

.touchscreen > .top > .rows > .row > .product_row > .product_count,
.touchscreen > .top > .rows > .row > .product_row > .packaging_row > .product_count {
	float: left;
	clear: left;
	width: 8%;
}

.touchscreen > .top > .rows > .row > .product_row > .product_name,
.touchscreen > .top > .rows > .row > .product_row > .packaging_row > .product_name {
	float: left;
}

.touchscreen > .top > .rows > .row > .product_row > .product_price,
.touchscreen > .top > .rows > .row > .product_row > .packaging_row > .product_price {
	float: right;
	width: 15%;
	text-align: right;
}

.touchscreen > .top > .rows > .row > .product_row > .product_options {
	float:				right;
	width:				100%;
	font-size: 			80%;
}

.touchscreen > .top > .rows > .row > .product_row > .product_options > b {
	color: 				#999;
}

.touchscreen > .top > .rows > .linerows {
	border-top: 1px dashed #000000;
	margin-top: 10px;
	clear: both;
}

.touchscreen > .top > .top-bottom{
	position: absolute;
	width: 100%;
	bottom: 5px;
}

.touchscreen > .top > .top-bottom > .total {
	clear: both;
	border-top: 1px dashed #000000;
	font-weight: bold;
	padding: 0 10px;
	margin-bottom: 25px;
}

.touchscreen > .top > .top-bottom > .total > .title {
	float: left;
	clear: left;
	margin-top: 5px;
}

.touchscreen > .top > .top-bottom > .total > .total-amount {
	float: right;
	clear: right;
	width: 15%;
	margin-top: 5px;
	text-align:	right;
}

.touchscreen > .top > .top-bottom > .buttons,
.touchscreen > .buttons {
	clear: both;
	color: #FFFFFF;
	font-size: 12pt;
	text-align: center;
	margin-top: 5px;
}

.touchscreen > .top > .top-bottom > .buttons > .payment,
.touchscreen > .top > .top-bottom > .buttons > .scan,
.touchscreen > .top > .top-bottom > .buttons > .printticketbtn,
.touchscreen > .top > .top-bottom > .buttons > .nextcourse,
.touchscreen > .buttons > .blackbutton {
	width: 29%;
	height: 100%;
	float: left;
	margin-left: 10px;
	padding: 5px 0 5px 0;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid rgb(121,118,118);
	background: rgb(121,118,118); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(121,118,118,1) 0%, rgba(68,67,67,1) 50%, rgba(46,46,46,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(121,118,118,1)), color-stop(50%,rgba(68,67,67,1)), color-stop(100%,rgba(46,46,46,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(121,118,118,1) 0%,rgba(68,67,67,1) 50%,rgba(46,46,46,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(121,118,118,1) 0%,rgba(68,67,67,1) 50%,rgba(46,46,46,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(121,118,118,1) 0%,rgba(68,67,67,1) 50%,rgba(46,46,46,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(121,118,118,1) 0%,rgba(68,67,67,1) 50%,rgba(46,46,46,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#797676', endColorstr='#2e2e2e',GradientType=0 ); /* IE6-9 */
	cursor: pointer;
}

.touchscreen > .top > .top-bottom > .buttons > .activecourse {
	width: 30%;
	height: 100%;
	float: left;
	margin-left: 10px;
	padding: 5px 0 5px 0;
	color: #000;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.touchscreen > .top > .top-bottom > .buttons > .confirm,
.touchscreen > .top > .top-bottom > .buttons > .search,
.touchscreen > .buttons > .greenbutton {
	width: 28%;
	height: 100%;
	float: right;
	margin-right: 10px;
	padding: 5px 0 5px 0;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid rgb(139,190,187);
	background: rgb(139,190,187); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(139,190,187,1) 0%, rgba(113,166,163,1) 50%, rgba(104,154,151,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(139,190,187,1)), color-stop(50%,rgba(113,166,163,1)), color-stop(100%,rgba(104,154,151,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(139,190,187,1) 0%,rgba(113,166,163,1) 50%,rgba(104,154,151,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(139,190,187,1) 0%,rgba(113,166,163,1) 50%,rgba(104,154,151,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(139,190,187,1) 0%,rgba(113,166,163,1) 50%,rgba(104,154,151,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(139,190,187,1) 0%,rgba(113,166,163,1) 50%,rgba(104,154,151,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bbebb', endColorstr='#689a97',GradientType=0 ); /* IE6-9 */
	cursor: pointer;
}

.touchscreen > .buttons > .contant {
	float: right;
	margin-right: 10px;
}

.touchscreen > .bottom {
	position: absolute;
	bottom: 0px;
	height:50%;
	width:100%;
}

.touchscreen > .bottom > .left {
	overflow: auto;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	width: 20%;
	height: 100%;
	float: left;
}

.touchscreen > .bottom > .left > .group {
	background: #7AA4A2;
	color: #FFFFFF;
	width: 100%;
	height: 45px;
	display: table;
}

.touchscreen > .bottom > .left > .group > div {
	display: table-cell;
	vertical-align: middle;
}

.touchscreen > .bottom > .left > .cat {
	height: 45px;
	display: table;
	border-bottom: 1px solid #CCC;
	width: 100%;
}

.touchscreen > .bottom > .left > .cat > div {
	display: table-cell;
	vertical-align: middle;
}

.touchscreen > .bottom > .left > .cat.active > div {
	background-color: #d5d4d4;
}

.touchscreen > .bottom > .right {
	float: left;
	width: 80%;
	height: 100%;
	overflow: auto;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.touchscreen > .bottom > .right > .product {

	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;

	float: left;
	height: 45px;
	width: 25%;
	padding: 5px;
	background: #454343;
	color: #000000;
	overflow:hidden;
	border: 1px #FFFFFF solid;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.remove-person {
	float:right;
	width: 30px;
	height: 30px;
	margin-top: 10px;
	background-image: url("../images/icons/cash-add-del.png");
	clear: right;
}

.cap div.buttons > .blackbutton {
	padding: 8px 0px;
	margin-bottom: -10px;
}

.cap > div {
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	float: left;
	width: 100%;
}


.cap div.buttons > div {
	display: inline-block;
	float: left;
	width: 49%;
	position: relative;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin-left: 0;
}

.cap div.buttons > div:last-of-type {
	float: right;
}

.cap .ui-input-text {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 0.2em 0.4em;
}

.cap div.buttons > div .ui-input-text {
	margin: 0.2em 0 0;
	padding: 0.2em 0.4em;
}

.cap-debit {
	display: block;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: relative;
	padding-top: 10px;
	clear: both;
}

.cap-debit > div  {
	display: inline-block;
	width: 49%;
	position: relative;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin-left: 0;
	float: left;
}

.cap-debit > div:first-of-type {
	line-height: 55px;
}

.cap-debit > div:nth-of-type(2n) {
	float: right;
}

.cap-debit > div:nth-of-type(2n) .ui-btn {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	color: #FFF;
	text-shadow: none;
	font-weight: normal;
	background: rgb(121,118,118); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(121,118,118,1) 0%, rgba(68,67,67,1) 50%, rgba(46,46,46,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(121,118,118,1)), color-stop(50%,rgba(68,67,67,1)), color-stop(100%,rgba(46,46,46,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(121,118,118,1) 0%,rgba(68,67,67,1) 50%,rgba(46,46,46,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(121,118,118,1) 0%,rgba(68,67,67,1) 50%,rgba(46,46,46,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(121,118,118,1) 0%,rgba(68,67,67,1) 50%,rgba(46,46,46,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(121,118,118,1) 0%,rgba(68,67,67,1) 50%,rgba(46,46,46,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#797676', endColorstr='#2e2e2e',GradientType=0 ); /* IE6-9 */
	font-size: 12pt;
}

.cap-total {
	font-size: 16px;
	font-weight: 900;
}

.cap .buttons .blackbutton,
.cap .buttons .greenbutton {
	margin-left: 0;
	margin-right: 0;
}

.cap-debit > div:nth-of-type(2n) .ui-icon {
	background-image: url("../../public/css/images/icons-18-white.png");
}

.capr > div {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
	width: 100%;
}

.capr .buttons .blackbutton,
.capr .buttons .greenbutton {
	margin-left: 0;
	margin-right: 0;
}

.capr .change-qty {
	width: 33%;
	min-height: 2px;
	position: relative;
	float: left;
}

.capr .change-qty span {
	display: block;
	background-image: url("../../public/css/images/icons-36-black.png");
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
	float: left;
	cursor: pointer;
}

.capr .change-qty span.min {
	background-position: -70px top;
	margin-left: 10px;
}

.cap .price-ul + .buttons > div > input {
	margin-top: 0;
}

.messbox.success {
	z-index: 9999;
}

.capr .buttons .blackbutton + .blackbutton {
	float: right;
}

.ternary {
	display: block;
	position: relative;
	float: left;
	width: 100%;
}

.ternary input {
	width: 33%;
	float: right;
	clear: right;
	margin-top: 0;
}

.ternary label {
	float: left;
	display: block;
	width: 33%;
	clear: left;
	line-height: 36px;
}

.touchscreen.capr > .buttons > .blackbutton,
.touchscreen.cap > .buttons > .blackbutton,
.touchscreen.capr > .buttons > .greenbutton,
.touchscreen.cap > .buttons > .greenbutton {
	min-width: 137px;
}

.touchscreen .table-button {
	float: right;
	margin-top: 0.6em;
	height: 32px;
	width: 32px;
	padding: 3px;
	border-radius: 0.5em;
	background: #000000 url("../images/icons/cash-location-16.png") center center no-repeat;
	cursor: pointer;
}

.touchscreen .remove-button {
	float: right;
	margin-top: 0.6em;
	height: 32px;
	width: 32px;
	padding: 3px;
	border-radius: 0.5em;
	background: #000000 url("../images/icons/cash-remove-19.png") center center no-repeat;
	cursor: pointer;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}

.left {
	float: left;
	display: block;
	position: relative;
}

.right {
	display: block;
	float: right;
	display: block;
}

.totals {
	font-weight: bold;
	font-size: 14px;
	padding: 10px 0;
	display: block;
	position: relative;
	float: left;
	width: 100%;
}

.price-ul {
	float: left;
	width: 100%;
	display: block;
	position: relative;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
}

.price-ul li {
	float: left;
	width: 50%;
	display: inline-block;
}

.price-ul li:last-of-type {
	text-align: right;
}

.touchscreen-frame .floormap-background {
	overflow: scroll; /*moet scroll zijn*/
	-webkit-overflow-scrolling: touch;
}

.touchscreen-frame .floormap-background > .floormap-container {
	position: relative;
	width: 660px;
}

.touchscreen-frame .floormap-location {
	overflow: scroll; /*moet scroll zijn*/
	-webkit-overflow-scrolling: touch;
}

.touchscreen-frame .floormap-location-container {
	position: relative;
	width: 100%;
	display: inline-block;

	white-space: nowrap;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.touchscreen-frame .floormap-location-container > a {
	width: 30%;
	display: inline-block;
	background-color: red;
	margin-right: 4.5%;
	margin-bottom: 3%;
	text-decoration: none;
}

.touchscreen-frame .floormap-location-container > a:hover,
.touchscreen-frame .floormap-location-container > a:active,
.touchscreen-frame .floormap-location-container > a:focus {
	text-decoration: none;
}

.touchscreen-frame .floormap-location-container > a > .floormap-location {
	color:				#FFFFFF;
	background:			#73A8A5;
	padding:			10px;
	width:				calc(100% - 20px);
	text-align:			center;
	font-size:			12px;
	cursor:				pointer;
}

.touchscreen-frame .floormap-location-container > a > .floormap-location-active {
	background:			#F5921E;
}

.dannys {
	padding: 0.4em 0;
	position: relative;
	width: 78%;
}

.dannys #employee_name, .dannys #relation_name, .dannys #categories_name {
	display: inline-block;
}

.ui-input-text .date-today-start,
.ui-input-text .date-today-end {
	font-weight: bold;
	margin-left: 5px;
	font-size: 50%;

}

.employee-remove {
    background: #ddd none repeat scroll 0 0;
    border-radius: 0 5px 5px 0;
    bottom: 0;
    cursor: pointer;
    font-size: 15pt;
    line-height: inherit;
    padding: 0 10px;
    position: absolute;
    right: 2px;
    text-align: center;
    top: 0;
    width: 18px;
}

.recreation-object-remove {
    background: #ddd none repeat scroll 0 0;
    border-radius: 0 5px 5px 0;
    bottom: 0;
    cursor: pointer;
    font-size: 15pt;
    line-height: inherit;
    padding: 0 10px;
    position: absolute;
    right: 2px;
    text-align: center;
    top: 0;
    width: 18px;
}

.recreation-type-remove {
    background: #ddd none repeat scroll 0 0;
    border-radius: 0 5px 5px 0;
    bottom: 0;
    cursor: pointer;
    font-size: 15pt;
    line-height: inherit;
    padding: 0 10px;
    position: absolute;
    right: 2px;
    text-align: center;
    top: 0;
    width: 18px;
}

.license-plate-remove {
    background: #ddd none repeat scroll 0 0;
    border-radius: 0 5px 5px 0;
    bottom: 0;
    cursor: pointer;
    font-size: 15pt;
    line-height: inherit;
    padding: 0 10px;
    position: absolute;
    right: 2px;
    text-align: center;
    top: 0;
    width: 18px;
}

.webshop-groups-remove {
	background: #ddd none repeat scroll 0 0;
	border-radius: 0 5px 5px 0;
	bottom: 0;
	cursor: pointer;
	font-size: 15pt;
	line-height: inherit;
	padding: 0 10px;
	position: absolute;
	right: 2px;
	text-align: center;
	top: 0;
	width: 18px;
}

.ui-field-contain label.ui-input-text,
.ui-field-contain label.ui-select {
	width: 40%!important;
}

.ui-field-contain input.ui-input-text,
.ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search {
	width: 58%!important;
}

.ui-field-contain .ui-btn.ui-submit {
	width: 100%;
}

.ui-field-contain .ui-select {
	width: 58%;
}

.ui-field-contain .ui-select {
	width: 100%!important;
}

@media screen and (max-width: 450px) {

	.dannys #recreation_object_name,
	.dannys #recreation_object_type,
	.dannys #license_plate
	{
		display: inline-block!important;
	}

	.ui-field-contain label.ui-input-text {
		width: 100%!important;
	}

	.ui-field-contain input.ui-input-text,
	.ui-field-contain textarea.ui-input-text,
	.ui-field-contain .ui-input-search {
		width: 100%!important;
	}

	.ui-field-contain .ui-select {
		width: 100%;
	}
}

.taskitem, .messageitem, .orderitem {
	min-height: 75px;
	position: relative;
}

.taskitem .ui-link, .messageitem .ui-link, .productitem .ui-link, .orderitem .ui-link  {
	display: inline-block;
	vertical-align: top;
	text-decoration: none;
	width: 73%;
}

.productitem {
	min-height: 50px;
	position: relative;
}

.productitem .product-price {
	border-left: 1px solid #ddd;
	display: inline-block;
	vertical-align: top;
	float: right;
	height: 100%;
	position: absolute;
	top: 0;
	width: 27%;
	text-align: center;
	line-height: 80px;
	margin-right: -15px;
	cursor: pointer;
}

.orderitem .order-actions {
	border-left: 1px solid #ddd;
	display: inline-block;
	vertical-align: top;
	float: right;
	height: 100%;
	position: absolute;
	top: 0;
	width: 27%;
	text-align: center;
	line-height: 80px;
	margin-right: -15px;
}

.orderitem .order-actions {
	border-left: 1px solid #ddd;
	display: inline-block;
	vertical-align: top;
	float: right;
	height: 100%;
	position: absolute;
	top: 0;
	width: 27%;
	text-align: center;
	line-height: 120px;
	margin-right: -15px;
	cursor: pointer;
}

.taskitem .check, .messageitem .check {
	background-color: #ddd;
	background:url('images/check.png');
	background-size: 23px 23px;
	background-repeat: no-repeat;
	background-position: center 23px;
	border-left: 1px solid #ddd;
	display: inline-block;
	vertical-align: top;
	float: right;
	height: 100%;
	position: absolute;
	top: 0;
	width: 27%;
	text-align: center;
	line-height: 120px;
	margin-right: -15px;
	cursor: pointer;
}

.taskitem .not-check, .messageitem .not-check {
	background-color: #ddd;
	background:url('images/not-check.png');
	background-size: 23px 23px;
	background-repeat: no-repeat;
	background-position: center 23px;
	border-left: 1px solid #ddd;
	display: inline-block;
	vertical-align: top;
	float: right;
	height: 100%;
	position: absolute;
	top: 0;
	width: 27%;
	text-align: center;
	line-height: 120px;
	margin-right: -15px;
	cursor: pointer;
	color: #939393;
}

.taskitem .ui-li-heading, .messageitem .ui-li-heading {
	text-decoration: none;
}

.taskitem .ui-li-heading .status, .messageitem .ui-li-heading .status  {
	color: #333;
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 0;
}

.status.Voltooid {
	color: #8dac30!important;
}


.comment {
	height: auto;
	transition: height 0.3s linear, max-height 0s 0.3s linear;
}

.comment p{
	white-space: unset;
}

.read-more:after{
	content: " ";
	background-image: linear-gradient(rgb(250 250 250 / 80%), #fafafa);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	height: 40px;
}

.comments .comment {
	overflow: hidden;
}
.break-spaces{
	height: 80px;
	white-space: break-spaces !important;
	max-height: unset !important;
}

#btn-chooseMobileModal {
	display: flex;
	justify-content: center;
	border-radius: 0.25rem;
	color: #212529;
	cursor: pointer;
	background-color: #859E9D;
	border-color: #859E9D;
	opacity: 1;
	width: 40px;
	height: 37px;
}

@media (min-width: 767px) {
	#btn-chooseMobileModal {
		display: none;
	}
}

.switch-button {
	position: absolute;
	top: 30px;
	right: 30px;
}

#btn-chooseMobileModal:hover {
	color: #FFFFFF;
	background-color: #708d8c;
	border-color: #6a8685;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	outline: 0;
}

.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}


.modal-open {
	overflow: hidden;
}
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	outline: 0;
}

.modal-dialog {
	position: relative;
	width: auto;
	margin: 0.5rem;
	pointer-events: none;
}
.modal.fade .modal-dialog {
	transition: transform 0.3s ease-out;
	transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
	.modal.fade .modal-dialog {
		transition: none;
	}
}
.modal.show .modal-dialog {
	transform: none;
}
.modal.modal-static .modal-dialog {
	transform: scale(1.02);
}

.modal-dialog-scrollable {
	display: flex;
	max-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
	max-height: calc(100vh - 1rem);
	overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
	flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
	overflow-y: auto;
}

.modal-dialog-centered {
	display: flex;
	align-items: center;
	min-height: calc(100% - 1rem);
}
.modal-dialog-centered::before {
	display: block;
	height: calc(100vh - 1rem);
	height: -webkit-min-content;
	height: -moz-min-content;
	height: min-content;
	content: "";
}
.modal-dialog-centered.modal-dialog-scrollable {
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
	max-height: none;
}
.modal-dialog-centered.modal-dialog-scrollable::before {
	content: none;
}

.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #FFFFFF;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0.3rem;
	outline: 0;
	text-shadow: none;
	font-weight: normal;
	color: black;
}

.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1040;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	display: none;
}

.modal-backdrop.fade {
	opacity: 0;
}
.modal-backdrop.show {
	opacity: 0.5;
}

.modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 1rem 1rem;
	border-bottom: 1px solid #dee2e6;
	border-top-left-radius: calc(0.3rem - 1px);
	border-top-right-radius: calc(0.3rem - 1px);
}
.modal-header .close {
	padding: 1rem 1rem;
	margin: -1rem -1rem -1rem auto;
	font-size: 18px;
	cursor: pointer;
}

.modal-header .close:hover {

}

.modal-title {
	margin-bottom: 0;
	line-height: 28px;
	font-size: 18px;
	font-weight: 600;
	text-transform: initial;
}

.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 1rem;
	font-size: 14px;
	line-height: 18px;
}

.modal-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	padding: 0.75rem;
	border-top: 1px solid #dee2e6;
	border-bottom-right-radius: calc(0.3rem - 1px);
	border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer > * {
	margin: 0.25rem;
}

.modal-scrollbar-measure {
	position: absolute;
	top: -9999px;
	width: 50px;
	height: 50px;
	overflow: scroll;
}

#chooseMobileModal {
	text-transform: initial;
}

#chooseMobileModal .modal-body span {
	display: flex;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	text-decoration: underline;
	text-transform: initial;
}

#chooseMobileModal .modal-body span {
	align-items: center;
	border-radius: 0.25rem;
	background-color: #859E9D;
	border: 1px solid #859E9D;
	color: white;
	cursor: pointer;
	display: flex;
	font-size: 16px;
	font-weight: 400;
	height: 31px !important;
	line-height: 16px;
	margin-left: 0;
	margin-bottom: 0;
	outline: none;
	position: relative;
	padding: 0 1rem !important;
	right: 0 !important;
	top: 0;
	text-align: center;
	vertical-align: middle;
	width: auto !important;
	text-decoration: none;
}

#chooseMobileModal .modal-body p {
	margin-bottom: 1rem;

}

#chooseMobileModal .modal-body a {
	align-items: center;
	border-radius: 0.25rem;
	background-color: #d88d44;
	border: 1px solid #d88d44;
	color: white;
	cursor: pointer;
	display: flex;
	font-size: 16px;
	font-weight: 400;
	height: 31px !important;
	line-height: 16px;
	margin-left: 0;
	margin-bottom: 0;
	outline: none;
	position: relative;
	padding: 0 1rem !important;
	right: 0 !important;
	top: 0;
	text-align: center;
	vertical-align: middle;
	width: auto !important;
	text-decoration: none;
}

.ui-bar-a .switch-button {
	top: 5px;
	right: 7px;
}

.ui-bar-a .switch-button #btn-chooseMobileModal {
	background: black;
	height: 30px;
	width: 30px;
}