html { 
	scroll-behavior: smooth; 
}

body {
	background-color: #ffffff;

	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	font-size: 1em;

	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-shadow: none;
}

.ui-content {
	padding: 0;
}

.responsive-menu-toggle-icon {
	box-sizing: border-box;
	display: block;
	width: 41px;
	height: 31px;
	z-index: 4;
	margin-top: 15px;
	position: absolute;
	left: 10px;
}

.responsive-menu-toggle-icon::before, 
.responsive-menu-toggle-icon::after, 
.responsive-menu-toggle-icon 
span.icon, 
.responsive-menu-toggle-icon 
span.icon::before, 
.responsive-menu-toggle-icon span.icon::after {
	/* background: #b0d50f; */
	background: #ffffff;
	content: '';
	display: block;
	width: 35px;
	height: 5px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 1px;
	transition: none 0.4s ease-out 0.1s;
	transition-property: -webkit-transform, top, bottom, left, opacity;
	transition-property: transform, top, bottom, left, opacity;
}

.ui-panel-page-content-open .responsive-menu-toggle-icon::before {
	webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 10px;
}

.ui-panel-page-content-open .responsive-menu-toggle-icon::after {
	webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 10px;
}

.ui-panel-page-content-open .responsive-menu-toggle-icon span.icon {
    left: -25px;
    opacity: 0;
}

.responsive-menu-toggle-icon span.icon::before {
	top: 10px;
}

.responsive-menu-toggle-icon span.icon::after {
	top: 20px;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../images/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

.copyright {
	display: block;
	text-align: center;
	font-size: 75%;
	margin-top: 20px;
	margin-bottom: 20px;
}

.copyright a,
.copyright a:visited {
	text-decoration: none;
	color: #b0d50f;
}

form {
	margin-bottom: 0;
}

.lan {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 100;
}

.hdrtitle {
	color: #b0d50f;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 140%;
	text-align: center;
}

.hdruser {
	display: inline-table;
	background-color: #b0d50f;
	width: 100%;
	min-height: 40px;
}

.login, .logout {
	margin: 10px 0px;
}

.logindata {
	font-size: 85%;
	display: inline-table;
	text-align: left;
	vertical-align: middle;
	margin-right: 20px;
}

.userformLabel {
}

div#userimage {
	position: absolute;
	right: 60px;
	margin-top: 0px;
	margin-bottom: 0px;
	height: 40px;
	width: 40px;
}

img.userimage {
	height: 40px;
	display: none;
}

input.userformTextbox,
input.userformButton {
	width: 100px;
}

input.loginbtn {
	background-image: url('../images/login.png');
}

input.logoutbtn {
	background-image: url('../images/logout.png');
}

input.userformButton {
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	border: none;
	width: 40px;
	height: 40px;
	font-size: 0px;
	text-indent: -99px;
	margin-top: 0px;
	margin-bottom: 0px;
	cursor: pointer;
}

.highlight {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	min-height: 40px;
	text-align: center;
}

.hlerror {
	background-color: #f2dede;
	color: #a94442;
}

.hlsuccess {
	/*background-color: #dcf764;*/
	background-color: #b1ec60;
	filter: alpha(opacity=60);
	/* IE */
	-moz-opacity: 0.6;
	/* Mozilla */
	opacity: 0.6;
	color: #000000;
}

.hlcontent {
	display: inline-table;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

.content {
	display: block;
	margin-left: 10px;
	margin-right: 10px;
}

#MainMenu .ui-panel-inner {
	padding: 0px;
}

#MainMenu h3 {
	color: #b0d50f;
	font-weight: normal;
	padding-left: 10px;
}

#MainMenu a,
#MainMenu a:visited,
.lan a,
.lan a:visited {
	text-decoration: none;
	color: #666666;
	font-weight: normal;
	margin: 0px;
}

.lan {
	font-size: 75%;
 }

.menuitem,
.menuitem-first {
	text-align: left;
	padding: 10px 10px;
	border-bottom-style: solid;
	border-width: 1px;
	border-color: #b0d50f;
	/*width: 80px;*/
	font-size: 80%;
	/*height: 100px;*/
}

.menuitem-first {
	border-top-style: solid;
}

.navigation {
	font-size: 80%;
	margin-left: 10px;
	margin-bottom: 10px;
}

.pageheader {
	padding-left: 10px;
}

.pagetitle,
.pageactions,
.work-action {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

.pagebutton, 
.workbutton,
.listbutton,
.sharebutton {
	margin-left: 10px;
	width: 35px;
	height: 35px;
	cursor: pointer;
}

.listheader {
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-size: 80%;
	background-color: rgba(176,213,015,0.5); /*#b0d50f;*/
	font-weight: bold;
	/*color: #ffffff;*/
}

.expandable .listheader {
	font-size: inherit;
}

.listitem, 
.listitem-work,
.listitem-empty {
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-size: 80%;
	border-bottom-style: solid;
	border-width: 1px;
	border-color: #b0d50f;
}

.expandable .listitem, 
.expandable .listitem-work,
.expandable .listitem-empty {
	font-size: inherit;
}

.listitem-invoice {
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-bottom-style: solid;
	border-width: 1px;
	border-color: #b0d50f;
}

.listitem-work {
	padding-left: 0px;
}

.listitem:hover, 
.listitem-invoice:hover, 
.listitem-work:hover {
	background-color: #eeeeee;
}

.listfield-xs {
	display: inline-block;
	vertical-align: top;
	width: 30px;
}

.listfield-s {
	display: inline-block;
	vertical-align: top;
	width: 100px;
}

.listfield-action {
	display: inline-block;
	vertical-align: top;
	width: auto;
}

.listfield-m {
	display: inline-block;
	vertical-align: top;
	width: 200px;
}

.listfield-l {
	display: inline-block;
	vertical-align: top;
	width: 300px;
}

.listfieldcontainer {
	/*float: right;*/
	display: inline-block;
	vertical-align: middle;
	min-width: 300px;
	/*width: auto;*/
}

.listfield-container,
.listfield-container-1,
.listfield-container-2,
.listfield-container-3,
.listfield-container-4,
.listfield-container-5 {
	vertical-align: top;
}

.group {
	display: inline-block;
	/*width: 300px;*/
}

.lstmenutitle {
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

.lstmenuitem {
	margin-left: 10px;
}

.unpayed {
	background-color: #ffdada;
}

.treatpayment {
	background-color: #dddddd;
}

.popup {
	font-size: 80%;
	min-height: 200px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

.popup .title {
	background-color: rgba(176,213,015,0.5); /*#b0d50f;*/
	text-align: center;
	margin-left: -10px;
	margin-right: -10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.popup .title h3 {
	/*background-color: rgba(176,213,015,0.5); /*#b0d50f;*/
	margin-top: 0px;
	margin-bottom: 0px;
}

.popup #Container {
	padding-top: 10px;
}

.popupsubmit,
.frmdetailaction,
.frmworkdayaction {
	margin-top: 10px;
	margin-bottom: 10px;
}

.fieldtitle {
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

.field-s {
	display: inline-block;
	vertical-align: top;
	width: 100px;
}

.field-m {
	display: inline-block;
	vertical-align: top;
	width: 200px;
}

.field-l {
	display: inline-block;
	vertical-align: top;
	width: 300px;
}

.formfield-s {
	display: block;
	vertical-align: top;
	width: 100px;
	padding: 10px 0px;
}

.formfield-m {
	display: block;
	vertical-align: top;
	width: 200px;
	padding: 10px 0px;
}

.formfield-l {
	display: block;
	vertical-align: top;
	width: 300px;
	padding: 10px 0px;
}

.formfield-xl {
	display: block;
	vertical-align: top;
	width: 320px;
	padding: 10px 0px;
}

.formlabel {
	font-weight: bold;
	padding-bottom: 5px;
}

.formvalue {
	display: inline-block;
}

.formvalue-registration {
	display: block;
}

.textbox-s {
	width: 100px;
}

.textbox-m {
	width: 200px;
}

.textbox-l {
	width: 300px;
}

.hidden {
	display: none;
}

.staffdetailcontainer,
.clientdetailcontainer,
.activitydetailcontainer,
.taskdetailcontainer,
.indexdetailcontainer,
.accountdetailcontainer,
.invoicedetailcontainer,
.workdaycontainer {
	/*display: none;*/
	font-size: 80%;
	margin-left: 10px;
	margin-right: 10px;
}

.detailmapcontainer {
	margin-bottom: 20px;
}

.mandatory:after {
	color: #ff0000;
	content: "*";
}

.mandatory2:after {
	color: #ff0000;
	content: "(*)";
}

#map, #taskmap {
	height: 600px;
	width: 90%;
}

#sortable { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	width: 60%;
}

#sortable li { 
	/*margin: 0 5px 5px 5px; 
	padding: 5px; */
}

html>body #sortable li { 
	/*line-height: 1.2em; */
}

.ui-state-highlight { 
	height: 1.5em;
	margin: 5px 0px;
	/*line-height: 1.2em; */
	background-color: #b0d50f;
}

.agenda-item {
	font-size: 0.7em;
}

.work-menu,
.task-menu,
.field-menu, 
.invoice-menu {
	margin-bottom: 10px;
}

.work-menu-item {
	font-size: 80%;
	width: 23%; 
	display: inline-block; 
	vertical-align: top; 
	text-align: center; 
	padding: 10px 0px;
	font-weight: bold;
	border-style: solid;
	border-width: 1px;
	border-color: #b0d50f;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	border-radius: 7px;
	cursor:pointer;
}

.invoice-menu-item {
	font-size: 80%;
	width: 30%; 
	display: inline-block; 
	vertical-align: top; 
	text-align: center; 
	padding: 10px 0px;
	font-weight: bold;
	border-style: solid;
	border-width: 1px;
	border-color: #b0d50f;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	border-radius: 7px;
	cursor:pointer;
}

.work-menu-item.urgent,
.invoice-menu-item.urgent {
	border-color: #ff0000;
}

.work-menu-item.active,
.task-menu-item.active,
.invoice-menu-item.active {
	background-color: #b0d50f;
}

.work-menu-item.active-urgent,
.invoice-menu-item.active-urgent {
	background-color: #ff0000;
	color: #ffffff;
}

.workcontainer label.checkbox-label {
	display: inline-block;
	margin-bottom: 10px;
}

.invoice-menu {
	margin-left: 10px;
}

.ui-mobile label {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 100%;
}

label.checkbox-label {
	font-size: 80%;
}

.filter {
	font-size: 80%;
	margin-bottom: 10px;
	width: 100%;
}

.workfilter,
.chosen-container {
	margin-bottom: 10px;
}

.lbl-highlight {
	background-color: #b0d50f;
	padding-left: 5px;
}

.valauto-display {
	font-style: italic;
}

.valauto-display:before {
	content: "(";
	margin-left: 5px;
}

.valauto-display:after {
	content: ")";
}

.field-tag {
	background-color: #4285F4;
	border-color: #4285F4;
	border-width: 1px;	
	border-style: solid;
	border-radius: 15px;
	color: #FFFFFF;
	font-size: 14px;
	padding: 10px 15px;
	position: relative;
}

.field-tag-active {
	background-color: #FFB600;
	border-color: #FFB600;
	border-width: 1px;	
	border-style: solid;
	border-radius: 15px;
	color: #FFFFFF;
	font-size: 14px;
	padding: 10px 15px;
	position: relative;
}

.field-tag-done {
	background-color: #00EA47;
	border-color: #00EA47;
	border-width: 1px;	
	border-style: solid;
	border-radius: 15px;
	color: #FFFFFF;
	font-size: 14px;
	padding: 10px 15px;
	position: relative;
}

.field-tag::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 8px solid #4285F4;
}

.field-tag-active::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 8px solid #FFB600;
}

.field-tag-done::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 8px solid #00EA47;
}

.registration,
.registrationprice {
	display: inline-block;
	width: 140px;
}

.errorvalue {
	background-color: #ff0000;
}

input.next {
	background-image: url('../images/next.png');
}

input.previous {
	background-image: url('../images/previous.png');
}

input.save {
	background-image: url('../images/save.png');
}

input.reset {
	background-image: url('../images/reset.png');
}

input.list {
	background-image: url('../images/list.png');
}

input.stop {
	background-image: url('../images/stop.png');
}

input.pageformButton {
	opacity: 1;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	border: none;
	width: 40px;
	height: 40px;
	font-size: 0px;
	text-indent: -99px;
	margin-right: 20px;
	cursor: pointer;
}

input.pageformButton:disabled {
	opacity: 0.4;
}

.clientdetails {
	display: inline-block;
	font-size: 80%;
	margin-top: 15px;
	margin-bottom: 15px;
	font-weight: bold;
	font-style: italic;
	padding: 15px;
	border-style: solid;
	border-width: 2px;
	border-color: #b0d50f;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	border-radius: 7px;
}

.clientdetails p {
	margin-bottom: 0px;
}

.invoicetasklist {
	margin-left: 10px;
	margin-right: 10px;
}

.taskremarks {
	display: block;
	margin-top: 5px;
	color: #000000;
}

.registrationremarks {
	display: block;
	margin-top: 5px;
	color: #ff0000;
}

.map-message {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	min-height: 40px;
	text-align: center;
	vertical-align: middle;
	background-color: #f2dede;
	color: #a94442;
}

.map-message-content {
	display: inline-table;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

.fielddetail-item {
	border-left: solid;
	border-width: 5px;
	border-color: #4285F4;
	padding-left: 5px;
}

.fielddetail-item.active {
	border-color: #FFB600;
}

.fielddetail-item.done {
	border-color: #00EA47;
}

.alert {
	background-color: #f2dede;
	color: #a94442;
}