/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i');

* {margin:0; padding:0}

html, body {
	height:100%;
	min-height:100%;
}

html {
	overflow-x:hidden;
}

body {
	background-color:#FFFFFF;
	font-family:'Lato', Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:14px;
}

p, input{
	font-size: 14px;

}

input[type="text"],
input[type="time"],
input[type="number"],
input[type="password"],
textarea,
select {
	padding: 3px;
	border: 1px solid #cccccc;
	margin: 0;
	box-sizing: border-box;
	height: 26px;
}

input[type="text"].warning,
input[type="time"].warning,
input[type="number"].warning,
input[type="password"].warning,
textarea.warning,
select.warning {
	box-shadow: 0px 0px 6px -2px indianred;
    border: 1px solid indianred;
    outline: 1px solid indianred;
    background-color: rgba(205, 92, 92, 0.025);
}

multiselect {
	width:100%;
	position:relative;
	box-sizing: border-box;
	display:inline-block;
	/* height: 26px; */
	color:#000000;
	padding: 0;
	margin: 0;
	text-align:left;
}

multiselect::after {
	font-family: 'FontAwesome';
	content: '\f0d7';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	height: 10px;
	width: 18px;
	line-height: 8px;
	transform: scaleX(0.6);
	font-size: 16px;
}

multiselect label {
	display:block;
	padding:3px 12px;
	border: 1px solid #cccccc;
	height: 26px;
	box-sizing: border-box;
}

multiselect select {
	display:none;
	position:absolute;
	z-index:1000;
	right:0;
	top:25px;
	height:auto;
	max-height:300px;
	padding:0;
	margin:0;
}

multiselect select option {
	padding:2px 4px;
}

multiselect select .deselect {
	display:none;
	border-bottom:1px solid #7a9cd3;
	padding-top:4px;
	padding-bottom:4px;
}

multiselect.open label {
	outline:-webkit-focus-ring-color auto 5px;
	outline-offset:-2px;
	overflow: inherit;
}

.filters input,
.filters select {
	box-sizing: border-box;
	padding: 3px 5px;
	margin-right: 2px;
}

.filters select,
.filters multiselect {
	max-width:150px;
}

.filters select[multiple] {
	width:100%;
	padding:0;
    margin:0;
}

.filters multiselect {
	margin-right: 2px;
}

.filters multiselect > select {
	width:100%;
	max-width:none;
}

.popup {
	display:none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.25);
}

.popup .window {
	/*position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;*/
	display: flex;
	flex-direction:column;
	width: 512px;
	height: 256px;
	min-width: 256px;
	min-height: 192px;
	background-color: #FFFFFF;
	border-radius: 2px;
	border: 1px solid #4e5055;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.10);
	/*margin: auto;*/
}

.popup .window .title,
.popup .window .buttons {
	box-sizing: border-box;
	display:flex;
	flex:0 0 28px;
}

.popup .window .title {
	justify-content:space-between;
	align-items: center;
	cursor:move;
	background: #717171 url(/assets/img/header-bg.png);
	background-size: contain;
	color:#FFFFFF;
	border-bottom: 1px solid #888888;
}

.popup .window .title .name {
	font-weight: bold;
	letter-spacing: 0.8px;
	font-style: italic;
	padding: 4px 6px;
}

.popup .window .title .close {
	position:relative;
	width: 34px;
	height: 27px;
	cursor:pointer;
	background-color:rgba(170, 69, 69, 0.5);
	transition:all 0.3s ease;
}

.popup .window .title .close:hover {
	background-color:rgba(170, 69, 69, 0.9);
}

.popup .window .title .close::before {
	content: '\f00d';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	font-family: "Font Awesome 5 Pro";
	font-size: 14px;
	color: #FFFFFF;
	height: 14px;
	text-align: center;
	margin: auto;
}

.popup .window .content {
	display:flex;
	flex-direction:column;
	flex:auto;
	padding:8px;
	overflow-y:auto;
}

.popup .window .content > * {
	flex:0 1 auto;
}

.popup .window .content > textarea {
	flex:1 0 auto;
	box-sizing:border-box;
	display:block;
	width:100%;
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	resize:vertical;
	padding:4px 5px;
	margin-bottom:6px;
}

.popup .window .buttons {
	background-color: #F8F8F8;
	border-top: 1px solid #BBBBBB;
	justify-content:flex-end;
	padding:8px;
}

.popup .window .buttons .button {
	width: auto;
	font-size: 13px;
	background: #efefef !important;
	border-radius: 2px;
	box-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.1);
	transition: box-shadow 0.1s ease;
	border: 1px solid #d3d3d3;
	padding: 3px 5px;
	margin-left:6px;
	text-decoration:none;
	cursor:pointer;
}

#calls_popup.popup .window {
	width:760px;
	height:760px;
}

a {
	text-decoration:none;
	color:#000000;
}
a:hover {
	text-decoration:underline;
}

notifications {
	background-color: indianred;
	height: 14px;
	line-height: 14px;
	font-size: 11px;
	box-sizing: border-box;
	display: inline-block;
	border-radius: 7px;
	padding: 0 4px;
	margin: 0 4px;
}

table {
	border-collapse:collapse;
}
td {	vertical-align:top; }

td[valign="middle"] {
	vertical-align: middle;
}

img { border:none}

span.help {
	cursor:help;
	border-bottom:1px dotted;
}

.ui-tooltip.tooltip {
	max-width:680px;
	opacity:1;
}

.tooltip {
    font-size: 14px !important;
    padding: 8px 10px !important;
    border: 1px solid #aaaaaa !important;
    border-width: 1px !important;
    box-shadow: 2px 2px 3px -3px #aaaaaa !important;
    border-radius: 2px !important;
    background: #fafafa !important;
}

tr.selected {
	outline: 1px solid #444444;
	background-color: #fafafa;
}

.maps.tooltip {
	padding: 2px 0 !important;
	background-color: transparent !important;
	border: 0px !important;
}

.maps.tooltip a {
	cursor:pointer !important;
	padding: 0.3em 0.6em;
}

.tooltip .tooltip_content {
	display:flex;
	text-align:left;
}

.tooltip .tooltip_content.highlight {
	outline:10px solid red;
	padding:6px 10px;
}

/*.tooltip * {
	background: #fafafa !important;
}*/

.tooltip hr {
	margin: 6px 0;
	border: 0px;
	border-top: 1px dotted #cccccc;
}

.tooltip strong {
	display:block;
}

.tooltip .details {
	min-width:360px;
	max-width:420px;
}

.tooltip .jobStatus, .tooltip .repairStatus {
	display:inline-block;
	font-size:small;
	box-sizing:border-box;
}

.tooltip .booked {
	color: #006633;
	background-color:transparent;
	font-weight: bold;
}

.tooltip .complete {
	color: #000000;
	background-color:transparent;
	font-weight: bold;
}

.tooltip .techRejected {
	color: #990000;
	background-color:transparent;
	font-weight: bold;
}

/*#details .log {

}*/

#details .log .call {
    white-space: nowrap;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #cccccc;
    margin-right: 6px;
}

#details .log .call em {
    font-size: 12px;
    margin-bottom: 2px;
    display: block;
}

#details .log .call span {
	display:block;
	white-space: normal;
}

.smallText {
	font-size:10px;
}
.grey {
	color:#666;
}


.tableNoPadding td {
	padding:0px;
}

.tableForm {
	border:1px solid #cccccc;
	background-color:#ffffff;
}

.tableForm th, .widgetTable th {
	text-align: left;
    font-size: 16px;
    color: #ffffff;
    padding: 6px;
    /*border: 1px solid #cccccc;*/
    background-color: #bbbbbb;
	text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.2);
	font-weight: bold;
}

.tableForm .labels {
	text-align:right;
}
.tableForm td {
	padding:5px;
	vertical-align: middle;
}

/*.tableForm td:last-child {
	border-right: 1px solid #cccccc;
}*/

.errorTd {
	background-color:#900;
	color:#fff;
	font-weight:bold;
}
.successTd {
	background-color:#090;
	color:#fff;
	font-weight:bold;
}
.widgetDiv {
	width:50%;
	height: 400px;
	background-color:#FFF;
	margin:10px;
	float:left;
}

#header {
	color:#ffffff;
	background:#717171 url('/assets/img/header-bg.png');
	background-size:contain;
	position:relative;
}
#tagline {
	text-align:center;
	font-size:26px;
	font-weight:bold;
	font-style:italic;
	padding-top:35px;
}
#logo {
	height:100px;
}

#nav {
	position: absolute;
	top:0;
	right:0;
	padding: 15px 20px;
}

#nav ul {
	display:flex;
	list-style:none;
}

#nav ul li {
	display:flex;
	padding: 5px 8px;
}

#nav ul li[count] {
	position:relative;
}

#nav ul li[count]::after {
    content: attr(count);
    box-sizing: border-box;
    display: inline-block;
    height: 16px;
    line-height: 14px;
    font-size: 11px;
    background-color: indianred;
    border-radius: 24px;
    padding: 1px 3px;
    margin: 0 4px;
    position: absolute;
    left: 0;
    top: -2px;
}

#nav ul li a {
	color: #ffffff;
	font-size: 26px;
	cursor: pointer;
}

#nav ul li a:hover {
	text-decoration:none;
}

#nav ul li .text {
	/*opacity: 0;
	width: 0px;*/
    display: inline-block;
    padding-left: 8px;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
	position: relative;
	top: -1px;
}

#nav ul li .text.current {
	opacity: 1 !important;
	width: auto !important;
}

#accountDetails {
	color: #ffffff;
	position: absolute;
	top: 46px;
	right: 0;
	padding: 10px 35px;
	text-align: right;
}

#accountDetails a {
	color: #ffffff;
}

#form1.diary {
	height:calc(100% - 134px);
}

.techManager {
	color:#888888;
}

.widgetTable tr {
	/*border: 1px solid #dedede;*/
	border-bottom: 1px solid #dedede;
}

.widgetTable td{
	padding: 10px 6px;
	border-bottom: 1px solid #dedede;
	/*border-top: 1px solid #dedede;*/
}

.widgetTable tbody tr:hover{
	cursor:pointer;
	background-color:#d0d0d0;
	color:#000;
}

.widgetTable tbody tr:hover td.enoughBooked {
	background-color:#a8c0a4 !important;
}

.widgetTable tbody tr:hover td.onHoliday {
	background-color:#8092b8 !important;
}

.widgetTable tbody tr:hover td.notEnoughBooked {
	background-color:#784545 !important;
}

.goodPostcode td.slots {
	background-color:#99FFFF !important;
}

.widgetTable tbody tr.goodPostcode:hover td.slots.enoughBooked {
	background-color:#99FFFF !important;
}

.goodPostcode td.onHoliday {
	background-color:#93afea !important;
}

.goodPostcode td.notEnoughBooked {
	background-color:#aa4545 !important;
}

.goodPostcode td.enoughBooked {
	background-color:#caeacc;
}

.messageTable {
	margin-top:5px;
	border:1px solid #dedede;
}

.messageTable td, .messageTable th {
	padding:5px;
}
.messageTable th {
	text-align:left;
	background-color:#B1B3B4;
	color:#FFF;
}
.messageTable img {
	float:right;
	margin-left:5px;
}
.trBad td{
	background-color:#900;
	color:#ffffff;
}
.trNearlyBad td {
	background-color:#FF9;
}
.trGood td {
	background-color:#1e930e;
	color:#ffffff;
}

#diary {
	position:relative;
}

/*#diary::-webkit-scrollbar {
    display: none;
}*/

.loader {
	float: right;
	background-color: white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 7px 0;
	vertical-align: middle;
	margin: 5px;
}

.filter {
    position: absolute;
    margin: auto;
    right: 30px;
    top: 0;
    bottom: 0;
    height: 30px;
}

.tallHeader .filter {
	height: inherit;
    margin-top: 15px;
}

.filter input {
	width: 90px;
}

.tallHeader .filter select[multiple] {
	vertical-align: middle;
}

.tallHeader .filter select[multiple].expand {
	height:180px;
}

input.ui-button,
button.ui-button,
a.ui-button,
div.ui-button,
span.ui-button {
	width: auto;
	font-size: 13px;
	background: #efefef !important;
	border-radius:2px;
	box-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.1);
	transition:box-shadow 0.1s ease;
	border: 1px solid #d3d3d3;
	padding: 3px 5px;
    user-select: none;
}

input.ui-button:hover,
a.ui-button:hover,
div.ui-button:hover,
span.ui-button:hover {
	background: #dfdfdf !important;
}

input.ui-button:active,
a.ui-button:active,
div.ui-button:active,
span.ui-button:active {
	box-shadow: 0.25px 0.25px 0.25px rgba(0,0,0,0.2);
}

input.ui-button:focus {
	outline:none;
}

.ui-button.ui-button-text-only .ui-button-text {
	padding: 1px 8px;
	box-sizing: border-box;
	height: 18px;
	font-size: 12px;
	background: #efefef;
	border-radius: 2px;
	letter-spacing: -0.1px;
}

#calTable td {
    height: 74px;
    padding: 12px 8px 10px 8px;
	position:relative;
}

#calTable td .appointmentRequired {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 15px 0;
    border-color: transparent lightcoral transparent transparent;
	cursor:help;
}

#calTable td .appointmentRequired.marked {
	display:block;
}

#callLog {
	position: absolute;
	top: 20px;
	left: calc(50% + 460px);
	width: 240px;
}

#callLog.popup {
	position:static;
	width: 100%;
	margin-top: 16px;
	border-top: 1px solid #eeeeee;
	padding-top: 16px;
}

#callLog.popup #clNotes {
	width:100%;
	min-height:100px;
	max-height:180px;
	margin:10px 0;
	resize:vertical;
}

#callLog.popup input.cannedPhrase {
	margin:0 4px;
	display:inline-block;
}

#callLog .thValid, #callList, .callLog .thValid, #callList {
	border-right: 1px solid #cccccc !important;
}

#callLog #clNotes, .callLog #clNotes {
	display:block;
	height: auto;
	margin: 10px auto;
}

#callLog input, .callLog input {
	border: 1px solid #d3d3d3;
}

#callLog input:hover, .callLog input:hover {
	border-color: #999;
}

#callLog input:first-child, .callLog input:first-child {
	margin-top: 10px;
}

#callLog input.cannedPhrase, .callLog input.cannedPhrase {
	font-size: 11px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#callLog .call, .callLog .call {
	padding: 10px 5px;
	border-top: 1px solid #ccc;
}

#callLog .call i, .callLog .call i {
	font-size: 11px;
}

/* Widget columns section */

#columns.diary {
	height:100%;
}

#columns .column {
    float: left;
    width: 50%;
}

#columns.diary ul.column {
	height:100%;
	float:unset;
}

#columns ul {
	list-style:none;
	min-height:100%;
}

#columns #column1 .widget {
	margin: 30px;
}

#columns.diary #column1 .widget {
	display:flex;
	flex-direction:column;
	min-height:100%;
	padding:30px;
	margin:0;
	box-sizing:border-box;
}

#columns #column2 .widget {
	margin: 30px;
}

#columns .widget {
    margin: 30px 20px 0 20px;
}

#columns .widget .widget-head {
    color: #888888;
    /*overflow: hidden;*/
    width: 100%;
    height: 40px;
    line-height: 30px;
	background-color:#FFFFFF;
	position: relative;
	border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

#columns .widget .widget-head.flex {
	display:flex;
	/*justify-content:space-between;*/
	align-items:center;
	height: auto;
	line-height: normal;
	padding: 4px 0;
}

#columns .widget .widget-head.flex .info {
	display:flex;
	flex-direction:column;
	margin-left:6px;
}

#columns .widget .widget-head.flex .info .buttons {
	display:flex;
	margin-top:6px;
}

#columns .widget .widget-head.flex .info .buttons .button {
	margin-left:0;
	margin-right:6px;
}

#columns .widget .widget-head.flex .filter {
	all:unset;
	margin-left:auto;
}

#columns .widget .widget-head.flex .loader {
	flex-grow:0;
	flex-shrink:0;
}

#columns .widget .widget-head.flex .details {
	display:flex;
	align-items:center;
	cursor:help;
	margin-left:8px;
}

#columns .widget .widget-head.flex .spacer {
	flex:auto;
}

#columns .widget .widget-head.flex .filters {
	flex: auto;
	text-align: right;
}

.selectExpandIcon {
	background: #efefef !important;
	border-radius: 2px;
	border: 1px solid #d3d3d3;
	margin-right: 5px;
	font-size: 11px !important;
	margin-left: -19px;
	margin-top: -28px;
	padding-top: 6.5px;
	padding-bottom: 6.5px;
	width: 15px;
	text-align: center;
}

.selectExpandIcon.fa-minus {
	vertical-align: top;
    margin-top: 0px;
    display: inline-block;
    right: -34px;
    margin-left: -3px;
    width: 20px;
}

#columns .widget .widget-head.tallHeader.expand {
    height: 205px;
}

#columns .widget .widget-head.tallHeader {
	height: 65px;
}

#columns .widget .widget-head img{
	vertical-align:middle;
}

#columns .widget .widget-head h3 {
	padding: 5px 0px;
	font-size: 18px;
	font-weight: normal;
	line-height: 26px;
	display: inline-block;
	text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.1);
}

#columns .widget .widget-content {
    padding: 10px 0 5px;
    color: #000;
	background-color:#efefef;
    line-height: 1.2em;
    overflow: hidden;
	height:400px;
	overflow-y: auto;
	min-height:800px;
	/*transition: background-color 0.3s ease;*/
}

#columns .widget #diaryContainer.widget-content {
    display: flex;
    height: 100%;
    width: 100%;
    max-height: 100%;
    min-height: auto;
	flex-grow: 1;
	flex-shrink: 1;
}

#columns .widget #diaryContainer.widget-content .widget-content {
	display:flex;
	flex-direction:column;
}

#diaryContainer #diary {
	position: relative;
	flex-grow: 1;
	flex-shrink: 0;
	height: 100%;
}

#columns .widget .widget-content.skills {
	background-color:transparent;
}

#columns .widget .widget-content .skills_background {
    display: flex;
	flex-wrap:nowrap;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
	z-index:-1;
}

#columns .widget .widget-content .skills_background:empty {
	background-color:#efefef;
}

#columns .widget .widget-content table .skills_background:empty {
	background-color:transparent;
}

td.skills {
	position:relative;
	background-color:transparent;
}

td.skills .skills_background {
	z-index:0 !important;
}

td.skills span {
	position:relative;
	z-index:1 !important;
}

#columns .widget .widget-content .slot {
	position:relative;
}

#columns .widget .widget-content .slot span {
	position:relative;
	z-index:1;
}

#columns .widget .widget-content .slot .skills_background {
	z-index:0;
	background-color:transparent;
}

#columns .widget .widget-content .skills_background .colour {
	width:100%;
	height:100%;
}

#columns .widget .widget-content .skills_background .colour.skill_chromovision {
	background-color:#d1c1e0;
	order:1;
}

#columns .widget .widget-content .skills_background .colour.skill_clearcoat {
	background-color:#f8d6bb;
	order:2;
}

#columns .widget .widget-content .skills_background .colour.skill_bumper {
	background-color:#f5d7ea;
	order:3;
}

#columns .widget .widget-content .skills_background .colour.skill_customerservice {
	background-color:#ffffce;
	order:4;
}

/* End Columns section */

.paginationContainer {
	margin-left:0px;
}
.paginationContainer #results {
	float:left;
	margin:5px;
}
.paginationContainer #pages {
	clear:both;
	margin:5px 5px 15px 5px;
	float:left;
}

.paginationContainer #pages > div:first-child a {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.paginationContainer #pages > div:last-child a {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}

.paginationContainer #pageSelect {
	clear:both;
	margin:5px;
}

.paginationContainer .pagination a {
	background-color:#bbbbbb;
	color:#ffffff;
	padding: 6px 8px;
	margin-right: 1px;
	border-radius: 1px;
	display: block;
	font-weight:bold;
	text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.2);
}

.paginationContainer a.pageButtonActive {
	outline:1px solid rgba(34, 34, 34, 0.5);
	margin-left:1px;
	margin-right:2px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.paginationContainer .pagination a:hover {
	text-decoration: none;
}

.paginationContainer .pageButton {
	cursor:pointer;
}

.trArchived {
	background-color:#DDD;
}

.trHightlight {
	font-weight:bold;
}

/* Calendar ids */
#tableCal
{
	margin: 0px;
	border-collapse: collapse;
	padding: 0px;
}
#tableCal td
{
	font-size:9px;
	text-align:center;
	padding:0px;
	border: 1px solid #FFFFFF;

}
#tableCal caption
{
	caption-side:bottom;
	text-align:left;
}
#tdCalBlank
{
	border: 5px solid #0099CC;
	font-weight:bold;
}
#tdCalMonth
{
	color:#6e6e6e;


}
.tdCalDays
{
 	background-color:#DFDFDF;
}
.tdCalDaysWE
{
	background-color:#CCCCCC;
}
.tdCalToday
{
	background-color:#CCFF99;
	font-weight:bold;
}
.tdCalPast
{
	background-color:#666666;
}
#tdCalBooked
{
	background-color:#FFFF00;
}
#tdCalBooked2
{
	background-color:#FF9900
}
#tdCalBooked3
{
	background-color:#CC66FF;
}
#tdCalOverdue
{
	background-color:#FF3300;
}

#subnav {
	background-color:#4e5055;
	padding: 6px;
	text-align: center;
	border-top: 1px inset rgba(51, 51, 51, 0.10);
}

#subnav span {
	color:#ffffff;
	font-size:10px;
	position:relative;
	top:-2px;
}

#subnav a {
    position: relative;
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    padding: 3px 6px;
    text-transform: uppercase;
    font-size: smaller;
    letter-spacing: 1px;
	top:-1px;
}

#subnav a:last-of-type {
	border-right:0;
}

#subnav a:hover::after{
    position: absolute;
    content: '';
    border-bottom: 1px dotted #cccccc;
    bottom: 2.5px;
    left: 6px;
    right: 6px;
    border-radius: 1px;
    height: 10px;
}

/* calendar styles  */
.slot {
	width: 31px;
    height: 31px;
    border: 1px solid #ddd;
    float: left;
    background-color: #FFF;
    position: relative;
    text-align: center;
    box-sizing: border-box;
	padding: 8px 0;
    font-size: 14px;
    line-height: 14px;
	font-weight: bold;
	margin-right: 2px;
	text-decoration:none;
	border-radius: 3px;
}

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

.slot.matching {
	outline: 2px solid #4e5055;
}

.slot.job.selected {
	outline: 2px solid #4e5055;
}

.appointment.booked {
	background-color:#006633;
	color:#fff;
	font-weight:bold;
}

.appointment.highlight {
	outline: 4px solid #000000;
}

#columns .widget .widget-content .slot.skills {
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#columns .widget .widget-content .slot .skills_background .colour.skill_chromovision {
	background-color:#663399;
}

#columns .widget .widget-content .slot .skills_background .colour.skill_clearcoat {
	background-color:#e8781d;
}

#columns .widget .widget-content .slot .skills_background .colour.skill_bumper {
	background-color:#de7cb8;
}

#columns .widget .widget-content .slot .skills_background .colour.skill_customerservice {
	background-color:#ffff00;
	color:#000000;
}

.appointment.booked.skill_chromovision.skill_clearcoat {
	background: rgb(102,51,153);
	background: -moz-linear-gradient(-45deg, rgba(102,51,153,1) 50%, rgba(232,120,29,1) 50%);
	background: -webkit-linear-gradient(-45deg, rgba(102,51,153,1) 50%,rgba(232,120,29,1) 50%);
	background: linear-gradient(135deg, rgba(102,51,153,1) 50%,rgba(232,120,29,1) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#663399', endColorstr='#e8781d',GradientType=1 );
}

.appointment.booked.skill_chromovision.skill_bumper {
	background: rgb(102,51,153);
	background: -moz-linear-gradient(-45deg, rgba(102,51,153,1) 50%, rgba(222,124,184,1) 50%);
	background: -webkit-linear-gradient(-45deg, rgba(102,51,153,1) 50%,rgba(222,124,184,1) 50%);
	background: linear-gradient(135deg, rgba(102,51,153,1) 50%,rgba(222,124,184,1) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#663399', endColorstr='#de7cb8',GradientType=1 );
}

.appointment.booked.skill_clearcoat.skill_bumper {
	background: rgb(232,120,29);
	background: -moz-linear-gradient(-45deg, rgba(232,120,29,1) 50%, rgba(222,124,184,1) 50%);
	background: -webkit-linear-gradient(-45deg, rgba(232,120,29,1) 50%,rgba(222,124,184,1) 50%);
	background: linear-gradient(135deg, rgba(232,120,29,1) 50%,rgba(222,124,184,1) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8781d', endColorstr='#de7cb8',GradientType=1 );
}

.appointment.booked.skill_chromovision.skill_clearcoat.skill_bumper {
	background: rgb(102,51,153);
	background: -moz-linear-gradient(-45deg, rgba(102,51,153,1) 6%, rgba(102,51,153,1) 33%, rgba(232,120,29,1) 33%, rgba(232,120,29,1) 66%, rgba(222,124,184,1) 66%);
	background: -webkit-linear-gradient(-45deg, rgba(102,51,153,1) 6%,rgba(102,51,153,1) 33%,rgba(232,120,29,1) 33%,rgba(232,120,29,1) 66%,rgba(222,124,184,1) 66%);
	background: linear-gradient(135deg, rgba(102,51,153,1) 6%,rgba(102,51,153,1) 33%,rgba(232,120,29,1) 33%,rgba(232,120,29,1) 66%,rgba(222,124,184,1) 66%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#663399', endColorstr='#de7cb8',GradientType=1 );
}

.appointment.complete {
	background-color:#000;
	color:#fff;
	font-weight:bold;
}

.appointment.techRejected{
	background-color:#990000;
	color:#fff;
	font-weight:bold;
}
.enoughBooked {
	background-color: #caeacc;
}
.notEnoughBooked {
	background-color: #aa4545;
    color: #ffffff;
}

.onHoliday {
    background-color: #93afea;
    color: #ffffff;
}
.notOpen {

	background-color:#CCC;
}
.thValid {
    background-color: #c5dfc1 !important;
    color: #000000 !important;
	text-shadow:none !important;
}
.thFailed{
	background-color:#900 !important;
}
.trUnread td,.trUnread th {
	background-color:#900 !important;
}

.bookedcs {
	background-color: yellow;
	color: #FFFFFF;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.bookedaudit {
	background-color: #0000c7;
	color: #FFFFFF;
}

.bookedrework {
	background-color:#7C5E3F;
	color: #FFFFFF;
}

.extra {
	width:10px;
	transition:0.5s;
}
.extra:hover{
	width:30px;
}

.extra div {
	display:none;
}

.clear {
	clear:both;
}

.slots {
	border-right: 1px solid #dedede;
}

.slots.skill_chromovision {
	background-color:#d1c1e0
}

.am-pm {
	color: #999;
	font-size: 8px;
	position: absolute;
	left: 12px;
}

.goodPostcode {
	font-weight:bold;
	border-bottom:2px solid #cc0000;
	border-top:2px solid #cc0000;
	background-color:#9FF;
}

.goodPostcode td{
	border-bottom:2px solid #cc0000;
	border-top:2px solid #cc0000;
	background-color:#9FF;
}

.goodPostcodeSlot {
	background:#900;
	color:#FFFFFF;
}

/* CLOCK PICK */
#CP_hourcont {
padding: 0px; position:absolute; border:1px solid #dddddd;background-color:#dddddd;display:none;
}

#CP_minutecont {
background-color:#dddddd;padding: 0px;position:absolute;width:50px;border: 1px solid #dddddd;display:none;
}

.floatleft {
float:left;
}

.CP_hour {
color:white;padding:3px;font-family: Arial, Helvetica, sans-serif;font-size:10px;white-space:nowrap;cursor:pointer;width:35px;margin:1px;background-color:#999999;
}

.CP_minute {
color:white;padding:3px;background-color:#aaaaaa;font-family: Arial, Helvetica, sans-serif;font-size:9px;white-space:nowrap;cursor:pointer;width:auto;margin:1px;
}

.CP_over {
background-color:#666666;
}
/* END CLOCK PICK */

.blink_me {
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}


#export {
	cursor:pointer;
}

.day {
	padding: 10px 0;
	border-top: 1px solid #cccccc;
	border-collapse: collapse;
}

.am {
	border-bottom: 1px dotted #ccc;
	height: 35px;
	margin-bottom: 4px;
	position:relative;
}
.pm {
	height:31px;
	position:relative;
}

.ampmHighlight {
	background-color:#AE06C3;
}
.diaryNote {
	white-space: pre-wrap;
	text-align: right;
	font-style: italic;
	max-height: 30px;
	overflow: hidden;
	font-weight: bold;
}
.diaryNote:hover {
	max-height: 300px;
	background-color:#fff;
	color: #000000;
	padding:3px;
}
.locked {
	background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 5px, transparent 5px, transparent 5px, rgba(0,0,0,0.13) 10px);
	/* background-image: repeating-linear-gradient(45deg, gray 0px, gray 25px, transparent 25px, transparent 50px, gray 50px); */

}
.locked .slot { display:none; }


.tableKPI {
	margin-top:10px;
	margin-bottom:20px;
	border:1px solid #CFCFCF;
}
.tableKPI th {
	color:#fff;
	background-color:#000;
	padding:5px;
}
.tableKPI td {
	padding:3px;
}
.tableKPI tr {
	border-bottom:1px dotted #E0E0E0;
}

.tableKPI tr:hover {
	background-color:#CFAFF8;
}

.inprogress {
	background-image: repeating-linear-gradient(45deg, rgba(255,0,0,0.1) 0px, rgba(0,0,0,0.1) 5px, transparent 5px, transparent 5px, rgba(0,0,0,0.13) 10px);
}

.inprogress.me {
	background-color: midnightblue;
	color: #ffffff;
}

.listTable {
	background-color: #ffffff;
	vertical-align: top;
    table-layout: fixed;
	margin: 0 5px;
}

#mapping .listTable {
	display:inline-block
}

#mapping #map {
	display:inline-block;
	vertical-align: top;
	width: calc(100% - 980px);
}

.listTable tbody tr {
	cursor: pointer;
}

.showDetails.selected {
    outline: 2px solid #4e5055;
}

.listTable td {
	padding: 5px 10px;
	border: 1px solid #eeeeee;
}

.listTable .collapsable.collapsed {
	display:none;
}

.listTable .tableForm td {
	border:0px;
}

#moreInfo tr {
	cursor: default;
}

#moreInfo td {
	background-color: #fdfdfd;
	padding: 10px;
	max-width: 340px;
}

.enoughBooked.more {
	background-color:lightsalmon;
}

.newNote {
	padding:10px 5px;
	text-align:right;
}

.newNote textarea {
	font-family:Arial, Helvetica, sans-serif;
	box-sizing: border-box;
    width: 100%;
    height: 75px;
    max-height: 100px;
    padding: 5px;
    resize: vertical;
	margin-bottom:10px;
}

/*.focusSection {

}*/

.focusSection .tableForm {
	position:relative;
}

.focusSection .overlay {
	opacity:0;
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:100%;
	background-color:rgba(0,0,0,0.75);
	transition:opacity 0.3s ease;
}

.focusSection.focus .tableForm {
	z-index:12;
}

.focusSection.focus .overlay {
	bottom:0%;
	z-index:10;
}

.focusSection .overlay.show {
	opacity:1;
	transition:opacity 0.3s ease;
}

.notice {
	padding: 10px 16px;
	margin: 0 12px;
	background-color: #ffffff;
	border-radius: 2px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.notice .mdi {
	font-size: 19px;
	line-height: 11px;
	position: relative;
	top: 2px;
	margin-right: 4px;
}

.error.notice {
	background-color:#aa4545;
	color:#FFFFFF;
}

.error.notice a {
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:underline;
}

.good.notice {
	background-color:#c5dfc1;
}

.orderColumn {
	cursor:pointer;
}

#tooltip {
    padding: 12px 16px;
    background-color: #FFFFFF;
    border: 1px solid #EEEEEE;
    box-shadow: 1px 1px 2px -2px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 1000;
	cursor:default;
}

.levelDown {
	transform: rotate(90deg);
	padding: 10px;
	font-size: 18px;
}

#damageDetails .mainRow,
#damageDetails .mainRow td,
#damageDetails .subDamage,
#damageDetails .subDamage td {
	border-bottom-width: 0;
}

#damageDetails .subDamage div[id^=td] {
	display: inline-block;
	padding-left: 10px;
}

#damageDetails .subDamage div[id^=td] span {
	display: block;
	width: 137px;
	color: #777;
}

#managesList .listContainer {
	display:flex;
	flex-wrap:wrap;
	margin:10px 25px;
}

#managesList .listContainer .item {
	cursor: default;
	padding: 4px 5px;
	border: 1px solid #dddddd;
	margin: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	flex-grow: 1;
}

#managesList .listContainer .item .delTechManages {
	float: right;
	cursor: pointer;
	line-height: 16px;
	margin-left: 4px;
	font-weight: bold;
}

#managersContainer {
	display:flex;
	justify-content: center;
}

#managersContainer .listColumn {
	background-color:#ffffff;
}

.multiselect {
	position:relative;
	display:inline-block;
	width: 150px;
}

.multiselect > label {
	width: 100%;
	position:relative;
    padding: 3px 24px 3px 5px;
    border: 1px solid #cccccc;
    margin: 0;
    height: 26px;
    display: block;
    box-sizing: border-box;
    line-height: 16px;
}

.multiselect > label::after {
    position: absolute;
    top: 0;
    bottom: 0;
    font-family: 'Material Design Icons';
    content: "\F35D";
    font-size: 22px;
    font-stretch: condensed;
    right: 0;
    line-height: 22px;
    color: #222222;
}

.multiselect.focus > label {
	outline-offset: -2px;
    outline: -webkit-focus-ring-color auto 5px;
}

.multiselect.focus.rows > .options {
	display: flex;
	width:calc(100% - 60px);
	position: fixed;
	left: 0;
	right: 0;
	margin: auto;
	flex-wrap: wrap;
	justify-content:flex-start;
	padding-bottom:0px;
}

.multiselect.focus.rows > .options li {
    display: block;
    border-bottom: 0px;
    flex: 1 1 calc(100% / 6);
}

.multiselect.focus.rows > .options li label {
	position:relative;
	padding-left:2px;
}

.multiselect > .options {
	display:none;
	position:absolute;
	z-index:1000;
}

.multiselect.focus > .options {
    display: block;
    min-width:200px;
	max-width:360px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
	padding: 2px 0;
	line-height:24px;
}

.multiselect.focus > .options > li {
	position:relative;
	padding: 0px 8px;
	border-bottom: 1px solid #cccccc;
}

.multiselect.focus > .options > li:hover {
	background-color:#eeeeee;
}

.multiselect.focus > .options > li:last-child {
	border-bottom:0px;
}

.multiselect.focus > .options input {
	width:auto;
	position: relative;
	top: 1px;
	margin-right: 5px;
}

.multiselect.focus > .options label {
    position: absolute;
    top: -1px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0px 28px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#days {
	width:520px;
	display: inline-block;
	vertical-align: top;
}

#days.collapsed {
	width:183px;
}

#booking {
	position: relative;
    width: calc(100% - 208px);
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}

#map {
    height: 540px;
    display: inline-block;
    vertical-align: top;
    width: 70%;
    position: relative;
    overflow: hidden;
}

#details {
	text-align:left;
    display: inline-block;
    vertical-align: top;
    width: 29.5%;
    min-height: 540px;
    position: relative;
    background-color: #ffffff;
    padding: 10px 12px;
    box-sizing: border-box;
    margin-left: 5px;
}

#details .loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0px;
    padding: 0;
}

#details .loader > img {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width:16px;
	height:16px;
}

#uploadTable th {
	font-weight:bold;
	text-align:center;
	font-size:16px;
}

#uploadTable td, #uploadTable th {
	padding:10px;
}

#uploadTable .log > div {
	margin-bottom:4px;
	padding:4px;
	font-weight:bold;
}

#uploadTable .log .error {
	background-color:indianred;
	color:#ffffff
}

#uploadTable .log .success {
	background-color:#c5dfc1;
	color:#ffffff
}

.uploadImage.button {
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	margin:auto 10px;
	height: 18px;
}

.dropzone {
	position:relative;
	padding:100px;
	box-sizing:border-box;
	background-color:#FAFAFA;
	border:2px dashed #EEEEEE;
	cursor:pointer;
	text-align:center;
}

.notes {
	width: 622px;
	min-height: 40px;
	resize: vertical;
}

.notes.highlight {
	background-color: #ffffe0;
	border: 3px solid indianred;
	outline: 4px solid indianred !important;
}

#jobList {
	width:900px;
	flex-basis:900px;
}

#jobDetails {
	flex-grow:1;
	flex-shrink:1;
}

#popup, #popup .content {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}

#popup {
	background-color:rgba(0,0,0,0.70);
}

#popup .content {
    min-height: 240px;
    min-width: 240px;
    margin: auto;
    background-color: #efefef;
    max-width: 840px;
    max-height: 460px;
    overflow-y: scroll;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 2px 2px 10px -2px #000000;
}

#confirmCustomer {
	position: absolute;
	width: 900px;
	margin: 10px auto 0 auto;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	z-index: 10;
	bottom: 0;
	top: 0;
	border: 1px solid #bbbbbb;
}

#confirmCustomer table {
	width:100%;
}

#confirmCustomer p {
	margin:1em;
}

.widget-content {
	position:relative;
}

.widget-content .loader {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index:100;
	padding: 64px;
	display: block;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.75);
	margin: 0;
	border-radius: 0;
	font-weight: bold;
	font-size: 24px;
}

.widget-content .loader * {
	font-size:24px;
}

.exportButton {
	display:inline-block;
	cursor:pointer;
	color:#FFFFFF;
	background-color:#2d6d2d;
	padding:5px 6px;
	border-radius:4px;
	border:1px solid #006300;
	box-shadow:1px 1px 2px 0px rgba(0, 0, 0, 0.25);
}

.exportButton:hover {
	background-color:#4a8a4a;
}

#diary {
	display:flex;
	flex-direction:column;
}

#diary .scroll {
	height:900px;
	overflow-y:auto;
}

#diary .row {
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	min-height: 28px;
	background-color: #FFFFFF;
	border-bottom: 2px solid #666666;
}

#diary .header.row {
	position: relative;
	z-index: 1;
	background-color: #BBBBBB;
	box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.25)
}

#diary .row:not(.header):hover::before {
	content:'';
	position:absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color:rgba(0,0,0,0.10);
}

#diary .row.postcodeMatch .cell:first-child {
	background-color:#9ff9FF;
}

#diary .row .cell {
	position:relative;
	flex:0 0 calc((100% - 360px) / 6);
	box-sizing:border-box;
	padding: 6px;
	border-right:1px solid #BBBBBB;
}

#diary .row .cell[data-day="7"] {
	flex:0 0 130px;
}

#diary .header.row .cell {
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.2);
	background-color: #BBBBBB;
}

#diary .row .cell:first-child {
	flex:0 0 160px;
}

#diary .row .cell:last-child {
	flex:0 0 70px;
	text-align:right;
}

/*#diary .row .cell.postcodeMatch {
	background-color:#9ff9FF;
}*/

#diary .row .cell.enoughBooked {
	background-color:#caeacc;
}

#diary .row .cell.notEnoughBooked {
	background-color:#aa4545;
	color:#FFFFFF;
}

#diary .row .cell.holiday {
	background-color:#93afea;
	color:#FFFFFF;
}

#diary .row .cell .time.holiday {
	position:relative;
	color:#FFFFFF;
	background-color:#93afea;
	outline:6px solid #93afea;
}

/*#diary .row .cell .time.holiday::before {
	content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background-color: #93afea;
}*/

#diary .row .cell.chromovision {
	background-color:#d1c1e0;
}

#diary .row .cell .additionalRequired {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	cursor: help;
	border-style: solid;
	border-width: 0 15px 15px 0;
	border-color: transparent lightcoral transparent transparent;
}

#diary .row .cell .day {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	height:100%;
	padding:0;
	border:0;
}

#diary .row .cell .day .time {
	position:relative;
	box-sizing: border-box;
	display:flex;
	flex:0 0 calc(50% - 5px);
	min-height:32px;
	cursor:pointer;
	border:0;
	margin:0;
}

#diary .row .cell .day .time.am {
	margin-bottom:10px;
}

#diary .row .cell .day .time.am::after {
	content: '';
	position: absolute;
	z-index:1;
	bottom: -6px;
	border-bottom: 1px dotted #BBBBBB;
	width: 100%;
}

/*#diary .row .cell .day .time.pm {

}*/

#diary .row .cell .day .time.busy .appointment {
	flex:0;
}

#diary .row .cell .day .time .appointment {
	position: relative;
	box-sizing: border-box;
	display: block;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	line-height: 20px;
	font-size: 20px;
	font-weight: bold;
	background-color: #FFFFFF;
	padding: 5px 0;
	border: 1px solid #BBBBBB;
	border-radius: 2px;
	margin-right: 4px;
	overflow:hidden;
}

#diary .row .cell .day .time .appointment .cnt {
	position:relative;
	left: -1px;
	z-index:1;
	letter-spacing: -1px;
	text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989992px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756802px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279415px 0px;
}

#diary .row .cell .day .time .appointment .skills {
	position: absolute;
	top: -6px;
	bottom: -6px;
	left: -6px;
	right: -6px;
	display: flex;
	transform: rotate(45deg);
}

#diary .row .cell .day .time .appointment .skills .skill {
	flex:auto;
}

#diary .row .cell .day .time .appointment .skills .skill.auditContract {
	background-color:#0000c7;
}

#diary .row .cell .day .time .appointment .skills .skill.reworkContract {
	background-color:#7C5E3F;
}

#diary .row .cell .day .time .appointment .skills .skill.chromovision {
	background-color:#663399;
	order:1;
}

#diary .row .cell .day .time .appointment .skills .skill.tintedClearcoat {
	background-color:#e8781d;
	order:2;
}

#diary .row .cell .day .time .appointment .skills .skill.texturedBumper {
	background-color:#de7cb8;
	order:3;
}

#diary .row .cell .day .time .appointment .skills .skill.customerService {
	background-color:#ffff00;
	order:4;
}

/*	#diary .row .cell .day .time.small .appointment:not(.new):not(:first-child) {*/
#diary .row .cell .day .time.small .appointment:not(.new) {
	flex-basis:12px;
	font-size:12px;
	transition:all 0.3s ease;
	margin-right:2px;
}

/*	#diary .row .cell .day .time.small .appointment:not(.new):not(:first-child):hover {*/
#diary .row .cell .day .time.small .appointment:not(.new):hover {
	flex-basis:32px;
	font-size:20px;
}

#diary .row .cell .day .time .spacer {
	flex:auto;
}

#diary .row .cell .day .time.selected .spacer,
#diary .row .cell .day .time.selected .notes {
	background-color:#ad37bc;
}

#diary .row .cell .day .time .notes {
	box-sizing:border-box;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: 228px;
	max-height: 32px;
	font-size: 13px;
	font-weight: bold;
	font-style: italic;
	line-height: 1em;
	text-align:right;
	cursor:pointer;
	padding: 4px 6px;

	white-space: pre-wrap;
	overflow: hidden;
	resize:none;
}

#diary .row .cell .day .time:hover .notes {
	position:absolute;
	right:0;
	top:0;
	z-index:2;
	color:#000000;
	background-color:rgba(255,255,255,0.9);
	max-height:300px;
}

/*#diary .row .cell .day .time .notes:hover {
	position:absolute;
	right:0;
	top:0;
	z-index:1;
	background-color:#FFFFFF;
	max-height:300px;
}*/

#diary .row .cell .day .time.locked {
	background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 5px, transparent 5px, transparent 5px, rgba(0,0,0,0.13) 10px);
}

#diary .row .cell .day .time .appointment.new {
	flex-basis:24px;
}

/* #diary .row .cell .day .time .appointment.new.reserved {
	background-color:red;
	color:#FFFFFF;
} */

#diary .row .cell .day .time .appointment.booked {
	background-color:#006633;
}

#diary .row .cell .day .time .appointment.rejected {
	color:#FFFFFF;
	background-color:darkred;
}

#diary .row .cell .day .time .appointment.complete {
	color:#FFFFFF;
	background-color:#000000;
}

#diary .row .cell .day .time .appointment.postcodeMatch {
	background-color:#9ff9FF;
}

#diary .row .cell .day .time .spacer .reserved {
	font-size:12px;
	font-weight:bold;
	font-style:italic;
    width: fit-content;
}

#diary .tech .techName small {
	opacity:0.5;
}

#diary .tech .skills {
	display:flex;
	flex-wrap:wrap;
	margin-top:4px;
}

#diary .tech .skills .icon {
	position:relative;
	width:20px;
	height:24px;
	color:#EEEEEE;
}

#diary .tech .skills .icon::before,
#diary .tech .skills .icon::after {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	font-family:"Font Awesome 5 Pro";
	margin:auto;
}

#diary .tech .skills .icon::before {
	width:14px;
	height:14px;
	font-size:14px;
}

#diary .tech .skills .icon::after {
	width:18px;
	height:18px;
	font-size:18px;
}

#diary .tech .skills .icon.chromovision {
	color:#663399;
}

#diary .tech .skills .icon.tintedClearcoat {
	color:#e8781d;
}

#diary .tech .skills .icon.texturedBumper {
	color:#de7cb8;
}

#diary .tech .skills .icon.customerService {
	color:#ffff00;
}

#diary .tech .skills .icon.highEndCars {
	color:#00ccff;
}

#diary .tech .skills .icon.iMIAccredited {
	color:#13e900;
}

#diary .tech .skills .icon.dealershipRepair {
	color:#e90000;
}

#diary .tech .skills .icon.remoteSupervision {
	color: darkgreen;
}

#diary .tech .skills .icon.autoglym {
	color:#222222;
}

#diary .tech .skills .icon.ceramicCoating {
	color:#dadada;
}

#diary .tech .skills .icon::before,
#diary .tech .skills .icon.chromovision::before,
#diary .tech .skills .icon.tintedClearcoat::before,
#diary .tech .skills .icon.texturedBumper::before,
#diary .tech .skills .icon.customerService::before {
	content: '\f06a';
	font-weight: bold;
	text-shadow: 0px 0px 1px #000000;
	top: -2px;
}

#diary .tech .skills .icon.no::after {
	content:'\f05e';
	font-weight:900;
	color:indianred;
}

#diary .tech .skills .icon.car::before {
	content:'\f1b9';
	font-weight:900;
}

#diary .tech .skills .icon.car.red {
	color:red;
}

#diary .tech .skills .icon.car.blue {
	color:blue;
}

#diary .tech .skills .icon.car.grey {
	color:grey;
}

#diary .tech .skills .icon.car.white::before {
	font-weight:300;
}

#diary .tech .skills .icon.amOnly::before {
	content:'\f766';
	font-weight:900;
	top:-2px;
}

#diary .tech .skills .icon.pmOnly::before {
	content:'\f767';
	font-weight:900;
	top:-2px;
}

#diary .tech .skills .icon.thirds::before {
	font-family:'Lato', Arial, Helvetica, sans-serif;
	content:'3';
	font-weight:900;
	width: 8px;
	height: 16px;
}

#diary .tech .skills .icon.multiple::before {
	content:'\f69c';
	font-size: 10px;
	height: 18px;
	width: 12px;
}

#diary .tech .skills .icon.alloyWheel::before {
	content:'\f631';
	font-weight:900;
	top: -2px;
}

#notes_popup input[type="checkbox"] {
	margin-right:4px;
}

#dates_popup .window {
	width:720px;
	height:280px;
}

#address_popup .window {
	width:780px;
	height:360px;
}

.loadTime {
	right: 0;
	top: 0;
	text-align: right;
	font-style: italic;
	font-size: 11px;
	padding: 4px 8px;
}

.damageClaims > div {
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
}

.payClaim {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16px;
    height: 16px;
	font-size: 12px;
	border-radius: 50%;
    border: 1px solid #9e9e9e;
    margin-left: 6px;
}

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

.payClaim.paid {
	background-color:lightgreen;
	border:0px;
}

.actionLogs {
	display:flex;
	flex-direction:column;
}

.actionLogs .log {
	width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px dotted #e2e2e2;
}

.actionLogs .log .details {
	font-size:12px;
	font-style:italic;
	margin-top:4px;
}

.statusTooltip.error,
.statusTooltip.sentBack {
	cursor: help;
}

/* Lawrence Edits */

.tableForm .subHeading{
	background-color: #e1e1e1;
	text-align: center;
}

.rounded-button {
	font-size: 24px;
	margin-left: 10px;
	padding: 3px 7px;
	color: black;
	background-color: #efefef;
	border: 1px solid #d3d3d3;
	border-radius: 5px;
}

.rounded-button:hover {
	cursor: pointer;
	background-color: #d3d3d3;
}

@media (max-width: 1920px) {

	#diary .row .cell .day .time .notes:last-child:nth-child(2) {
		max-width:100%;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(3) {
		max-width:164px;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(4) {
		max-width:132px;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(5),
	#diary .row .cell .day .time .notes:last-child:nth-child(6) {
		max-width:104px;
	}
}

@media (max-width: 1600px) {

	#diary .row .cell .day .time .notes:last-child:nth-child(2) {
		max-width:100%;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(3) {
		max-width:144px;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(4) {
		max-width:108px;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(5) {
		max-width:64px;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(6) {
		max-width:28px;
	}
}

@media (max-width: 1440px) {

	#diary {
		font-size:12px;
	}

	#diary .row .cell:first-child {
		flex: 0 0 132px;
	}

	#diary .row .cell:last-child {
		flex: 0 0 54px;
	}

	#diary .header.row .cell {
		font-size:14px;
	}

	#diary .row {
		min-height:26px;
	}

	#diary .row .cell {
		flex:0 0 calc((100% - 316px) / 6);
		padding:4px;
	}

	#diary .row .cell .day .time {
		flex-basis:26px;
	}

	#diary .row .cell .day .time.am {
		margin-bottom:8px;
	}

	#diary .row .cell .day .time.am::after {
		bottom:-4px;
	}

	#diary .row .cell .day .time .notes {
		position:absolute;
		right:0;
		top:0;
		max-height:26px;
		font-size:12px;
		padding-top:0;
		padding-bottom:0;
	}

	#diary .row .cell .day .time .appointment {
		flex-basis:26px;
		width:26px;
		height:26px;
		line-height: 14px;
		font-size: 16px;
	}

	#diary .row .cell .day .time.small .appointment:not(.new):hover {
		flex-basis:26px;
		width:26px;
		font-size:16px;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(2) {
		max-width:100%;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(3) {
		max-width:120px;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(4) {
		max-width:84px;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(5) {
		max-width:48px;
	}

	#diary .row .cell .day .time .notes:last-child:nth-child(6) {
		max-width:28px;
	}
}

@media (max-width: 1280px) {
	#diary .row .cell .day .time .appointment {
		flex-basis: 12px;
		font-size: 12px;
		transition: all 0.3s ease;
		margin-right: 2px;
	}

	#diary .row .cell .day .time .appointment:not(.new):hover {
		flex-basis:26px;
		width:26px;
		font-size:16px;
	}
}

@media (max-width: 1080px) {

}