@font-face {
	font-family: 'MyriadPro-Light';
	src:
		url('../fonts/MyriadPro-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/MyriadPro-Light.woff') format('woff'),
		url('../fonts/MyriadPro-Light.svg#MyriadPro-Light') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'MyriadPro-Regular';
	src:
		url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/MyriadPro-Regular.woff') format('woff'),
		url('../fonts/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'MyriadPro-Semibold';
	src:
		url('../fonts/MyriadPro-Semibold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/MyriadPro-Semibold.woff') format('woff'),
		url('../fonts/MyriadPro-Semibold.svg#MyriadPro-Light') format('svg');
	font-weight: normal;
	font-style: normal;
}




h1, .h1 {
	font-size: 24px;
	font-weight: normal;
	font-family: "MyriadPro-Semibold"
}


h2 {
	font-size: 22px;
	font-weight: normal;
	font-family: "MyriadPro-Semibold"
}

th {
	font-weight: normal;
	font-family: "MyriadPro-Semibold"
}





.clear { clear: both; }
a { text-decoration: none; }





body, html {
	margin: 0;
	padding: 0;
	background-color: white;
	color: #222222;
	font-family: 'MyriadPro-Regular', Arial, Sans-Serif;
	font-size: 18px;


	height: 100%;
}

body {
	min-width: 800px;
}


a {
	text-decoration: none;
	color: black;
}


select, input, textarea {
	padding: 5px 10px;
	font-size: 16px;
}

input[type=submit] {
	border: none;
	padding: 6px 10px;
	font-size: 16px;
	border-radius: 4px;
	border: 1px solid #ccc;
	cursor: pointer;
}

	input[type=submit]:hover {
		background-color: #e2e2e2;
		transition: 0.1s;
	}


















.text-error {
	color: #b94a48;
}


#site {

	height: 100%;
	min-height: 500px;
	margin: 0;
	background-repeat: repeat-y;
	z-index: 500;
}

#footer {
	background-color: #000;
	padding: 20px;
}

#header {
	width: 100%;
	height: 60px;
	z-index: 1;
	background-color: #222222;
}


#mainmenu {
	float: left;
	font-family: 'MyriadPro-Light', Arial, Sans-Serif;
	height: 60px;
	color: #cccccc;
}

#mainmenuinner {
	padding: 0 0 0 12px;
	margin: 0;
}

#mainmenu a {
	color: #eeeeee;
}


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

div.mainmenuitem>a {
	float: left;
	padding: 18px 20px 18px 20px;

	font-size: 20px;
}

	div.mainmenuitem>a:hover {
		transition: 0.1s;
	}

		div.mainmenuitem a:hover {
			text-decoration: none;
		}


.mainmenuitem:hover .submenu {
	display: block;
}


.mainmenuitemactive>a  {
	font-family: 'MyriadPro-Semibold', Arial, Sans-Serif;
}

.submenuitemactive {
	font-family: 'MyriadPro-Semibold', Arial, Sans-Serif;
}

.subsubmenuitemactive {
	font-family: 'MyriadPro-Semibold', Arial, Sans-Serif;
}

.mainmenuitem .submenu {
	display:none;
	z-index: 600;
	position: absolute;
	top: 55px;
	left: 0px;
	background-color: #222222;
	padding-top: 5px;
	padding-bottom: 5px;
}

.submenuitem {
	float: left;
	width: 230px;
	z-index: 20000000000;
}

	.submenuitem a {
		float: left;
		padding: 10px 20px;
		font-size: 18px;
		color: #BBB;
	}



.submenuitem>a:hover {
	background-color: rgba(255,255,255,0.1);
	transition: 0.1s;
}

.subsubmenuitem>a:hover {
	background-color: rgba(255,255,255,0.1);
	transition: 0.1s;
}





.submenublock {
	float: left;
}

.submenu.doublecolumn {
	width: 500px;
}



#mainmenu .onright {
	float: right;
	color: #CCC;
	text-decoration: none;
}

#mainmenu .separated {
	margin-left: 50px;
	color: #CCC;
}

#mainmenu .accountinfo {
	margin-right: 14px;
}

#mainmenu .settings {
	margin-right: 19px;
	color: #CCC;
}



.footermenu {
	margin-bottom: 20px;
}
.footermenublock .mainmenuitem {
	color: #AAA;
	font-weight: bold;
}
.footermenublock {
	float: left;
}



#mobilemenuicon {
	float: right;
	width: 22px;
	height: 20px;
	background: url(../images/mobilemenuicon.png) no-repeat center;
	background-size: 100% 100%;
	margin: 20px;
	cursor: pointer;
	display: none;
}

#mobilemenu {
	float: left;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 60px;
	left: 0;
	background-color: #cfcfcf;
	color: #3b3b3b;
	display: none;
	z-index: 1000;
	padding: 20px;
	box-sizing: border-box;
}

#mobilemenu ul {
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
}

#mobilemenu>ul {
	width: 100%;
}

#mobilemenu ul.mainmenu>li {
	float: left;
	width: 100%;
	padding-bottom: 10px;
}

	#mobilemenu ul.mainmenu>li>a {
		float: left;
		color: #3b3b3b;
	}

#mobilemenu ul.submenu {
	float: left;
	width: 100%;
	padding-left: 20px;
	box-sizing: border-box;
	padding-top: 5px;
}

	#mobilemenu ul.submenu>li {
		float: left;
		width: 100%;
		padding-bottom: 5px;
		font-size: 18px;
	}

		#mobilemenu ul.submenu>li>a {
			float: left;
			color: #3b3b3b;
		}

#mobilemenu ul.subsubmenu {
	float: left;
	width: 100%;
	padding-left: 40px;
	box-sizing: border-box;
	padding-top: 5px;
}

	#mobilemenu ul.subsubmenu>li {
		float: left;
		width: 100%;
		padding-bottom: 5px;
		font-size: 16px;
	}

		#mobilemenu ul.subsubmenu>li>a {
			float: left;
			color: #3b3b3b;
		}





#debug {
	background-color: #ccccff;
	color: black;
	display: none;
	width: 1081px;
	padding: 10px;
}





#content {
	clear: both;
	padding: 0px 28px 0px 28px;
	padding-bottom: 80px;
	width: 100%;

	box-sizing: border-box;
}





#content table.content {
	background-color: white;
	margin-top: 12px;
	width: 100%;
}










#content table.content th,
#content table.content td {
	padding: 6px 8px 4px 8px;

	background-color: #eeeeee;
	text-align: left;
	font-size: 16px;
}





#content table.content th {
	font-weight: normal;
	font-size: 16px;
	font-family: 'MyriadPro-Semibold';
}


b, .bold {
	font-weight: normal;
	font-family: 'MyriadPro-Semibold';
}











tr.light {
	background-color: #cccccc;
	color: white;
}







.editgroup {
	clear: both;
	margin-top: 4px;
}



.editbox {
	background-color: #eeeeee;
	margin: 0px 2px 2px 0px;
	padding: 2px 4px;
	float: left;
}



.attributeeditbox {
	background-color: #eeeeee;
	margin: 0px 2px 2px 0px;
	padding: 2px 4px;
	clear: both;
}



#rightbuttons .fabutton {
	float: right;
    padding: 10px 12px;
	border: 1px solid #aaaaaa;
	color: #333;
	margin-left: 18px;
	box-sizing: border-box;
	border-radius: 10px;

	background-color: #ffffff;
}

#rightbuttons .fabutton:hover {
	background-color: #f5f5f5;
	transition: 0.1s;
}

#rightbuttons .fabutton .fa::before {
    margin-right: 8px;
    position: relative;
    top: 2px;
}

#rightbuttons .fabutton .far::before {
    margin-right: 8px;
    position: relative;
    top: 2px;
}

#rightbuttons .fabutton .fa {
    color: #333 !important;
}

#rightbuttons .fabutton .far
 {
    color: #333 !important;
}



.buttona:hover {
	text-decoration: none;
}

.button {
	text-align: center;
    padding: 20px 0px  24px 0px;
    height: 80px;
	box-sizing: border-box;
	color: #333;
	box-sizing: border-box;
	font-size: 15px;
}

.button:hover {
	background-color: #f9f9f9;
}




.saveandbackbuttons {
	grid-template-columns: 4fr  1fr  1fr;
}







.titlebutton {
	text-align: left;
	padding-left: 30px;
    padding: 16px 10px 10px 30px;
}
.titlebutton:hover {
	background-color: white;
}


.button .fa::before {
    margin-right: 8px;
    position: relative;
    top: 0px;
}

.button  .far::before {
    margin-right: 8px;
    position: relative;
    top: 2px;
}



#buttons {
	clear: both;

	display: grid;

	height: 80px;

}

#buttons {

}


.button {
	border-left: 1px solid #bbbbbb;
	border-bottom: 1px solid #bbbbbb;
}








#rightbuttons {
	position: absolute;
	right: 0px;
	margin-top: 80px;
	z-index: 10000000;
	padding-right: 13px;
}




.bct {
	font-weight: normal;
	margin-top: 0px;
	padding-top: 0px;

	line-height: 20px;

}




.separate {
	margin-top: 30px;
}




a.nohover:hover {
	text-decoration: none;
}






table.order {
	border-collapse: collapse;
	border: 2px solid #f0f0f0;
}






.ordertotalrow {
	padding-top: 10px solid #f0f0f0;
}


.intervaltd {
	border: 0px;
	margin: 0px;
	padding: 0px;
}






.okmessage {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 60px;
	width: 100%;
	padding: 13px 14px 14px 30px;
	background-color: #bbffbb;
	z-index: 101;
	box-sizing: border-box;
	font-size: 28px;
}



.errormessage {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 60px;
	width: 100%;
	padding: 20px 14px 14px 241px;
	background-color: #ff2222;
	z-index: 101;
	box-sizing: border-box;
}



.errormessage a {
	color: white;
}




#content table.content tr.hidden td {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;

}


.faicon {
	cursor: pointer;
	font-size: 20px;
}








pre {
	margin-left: 0px;
	padding-left: 0px;
}






.listitemtemplate {
	display: none;
}








.tr {
	clear: both;
}


.th, .td {
	float: left;
	background-color: #eeeeee;
	padding: 3px 4px 1px 5px;
	margin: 2px 2px 0px 0px;
	height: 20px;
}

.th {
	font-weight: bold;
}

.tdcategoryname {
	width: 240px;
}

.tdcategorycode {
	width: 240px;
}


.tdcategorycode {
	width: 240px;
}

.tdcategoryobjects {
	width: 240px;
}

.tdeditlink {
	width: 40px;
}


.tdmenuitemname {
	width: 240px;
}


.tdmenuitemurl {
	width: 240px;
}




.sortbutton {
	position: relative;
	top: -1px;
}





.filterbox {
	float: left;
	padding: 0px 0px 0px 4px;
	margin-right: 10px;
	line-height: 28px;
}


.filtersubmit {
	background-color: #eeeeee;
 	margin-top: 14px;
	position: relative;
	top: 14px;
}



#weekdays {
	margin: 0px  0px 0px 20px;
	border: 0px solid #;
	float: left;
}


#user {
	float: left;
	padding-bottom: 30px;

}


#entries {
	clear: both;
	padding-top: 0px;

}


.weeknavbox {
	display: flex;
}

.content {
	width: 100%;
	max-width: 1000px;
	margin: 40px auto 0px auto;

}

.bookingbox {
	width: 100%;
}


.bookingcell {
	background-color: #eeeeee;
	text-align: center;
	font-size: 15px;
	padding: 6px;
	border: 2px solid #eeeeee;
	cursor: pointer;


}
.bookablebookingcell:hover {
	border: 2px solid black;
	background-color: #ffff99;
}


.bookedbookingcell {
	cursor: auto;
	background-color: #99ff99;
}

.bookedbookingcell:hover {
	border: 2px solid #eeeeee;
}

.pastdatebookingcell {
	background-color: #dddddd;
}




.hourcell {
	background-color: #eeeeee;
	font-size: 15px;
	font-weight: bold;
}


.week {
	margin: 2px;
	padding: 10px;
	border: 1px solid white;

	flex-grow: 1;
	text-align: center;

	font-size: 18px;
	line-height: 26px;
}
.previousweek {
	text-align: left;
}
.nextweek {
	text-align: right;
}



.bookingbox {
	margin-top: 20px;
}


.bookingbox .daybox {
	background-color: #dddddd;
}


.daybox {
	margin: 2px;
	padding: 10px;
	border: 1px solid white;

	flex-grow: 1;
	text-align: center;
}

.daybox .day {
	font-size: 18px;
	line-height: 26px;
}

.daybox .date {
	font-size: 16px;
}

.todaybox {
}



.greydaybox {
	background-color: #f7f7f7;
}
.greydaybox .day,
.greydaybox .date

 {
	color: #aaaaaa;
}


.dayboxactive {
	border: 1px solid #666666;
	background-color: #FFFFCC;
}
.dayboxactive .day,
.dayboxactive .date

 {
	color: black;
}




.whitedaybox {
	background-color: white;

	padding: 0px 20px 0px 20px;
	float: left;
	background-color: white;

	font-size: 60px;
	line-height: 40px;
}


.tdtaskproject {
	width: 290px;
}

.listitem {
	padding-bottom: 1px;
	padding-left: 2px;
	padding-right: 1px;
}


.tdtaskduration {
	width: 60px;
	text-align: center;
}


.tdtaskflatcharge {
	width: 80px;
}


.tdtaskdescription {
	width: 230px;
}


.tdtaskbillable {
	width: 90px;
}



.tdtaskeditor {
	height: 24px;
}



.tddeletetask {
	width: 19px;
}


.ui-datepicker {
	z-index: 2003 !important;
}

.ui-sortable-helper {
	background-color: #ffffbb;

}

#content table.content .posting-incomplete-outgoing td { background: #ff9999; }
#content table.content .posting-incomplete-incoming td { background: #ff9999; }
#content table.content .posting-manual-outgoing td { background:  #DFEEAA; }
#content table.content .posting-manual-incoming td { background: #DFEEAA; }

.valueprefix {
	font-size: 125%;
	padding-left: 15px;
	position: relative;
	top: 1px;
}


.billable { background: #ff2200; color: #ffffff; padding: 0 5px; display: inline-block; }
.notbillable { background: #22dd22; color: #ffffff; padding: 0 5px; display: inline-block; }


.double-zebra tr:nth-child(4n+1) td, .double-zebra tr:nth-child(4n+2) td {
	background: #EEEEEE;
}

textarea.template-textarea { width: 40%; height: 500px; padding: 10px; }
#template-readonly { background-color: #fafafa; border-color: #ddd; }
.file-history { display: inline-block; margin-bottom: 10px; }
	.file-history .filterbox { padding-left: 0; }
		.file-history .filterbox input { margin: 3px 0 0 0; }



#content table td.money, #content table th.money, .money  {
	text-align: right;
	white-space: nowrap;
}
.lefted, #content table td.lefted { text-align: left; }
.righted,  #content table td.righted { text-align: right; }
.centered , #content table td.centered  { text-align: center; }

/**
 * Clearfix
 */
.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%;
}



 .overlay {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	background: #666;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
 }

 .centered-popup {
	margin: 100px auto;
	background: #FFF;
	padding: 20px;
 }

 .imagedimension {
	width: 300px;
 }



 .alert { color: red; }
 .warning { color: orange; }
 .okay { color: green; }

.border-row-bottom td {
	border-bottom: 1px solid black;
}
.border-row-top td {
	border-top: 1px solid black;
}
table.bill {
	border-spacing: 0px 2px;
}
table.bill td {
	padding:3px;
}



@media only screen and (max-width : 600px) {
	#mainmenu {
		display: none;
	}
	#mobilemenuicon {
		display: block;
	}
}













#userentries thead tr th {
	background-color: #eeeeee;
}




#mainmenu {
	width: 100%;
}

#mainmenu .accountinfo {
	float: right;
}





.orderbilled {
	background-color: #bbffbb;
	padding: 15px 15px 15px 30px;
	margin-bottom: 2px;
	width: 100%;
	clear: both;
}



.fabutton {
	font-size: 22px;
}

.fabuttonicon {
	padding-bottom: 5px;
}