p:before
{
	position: relative;
    left: -8px;
}

.window form
{
	display: contents;
}

.window input[type="text"], .window input[type="password"]
{
	padding: 1px 0 1px 4px;
}

.window input[type="date"]
{
	width: 130px;
}

.window
{
	position: absolute;
	width: 580px;
	height: 445px;
	display: grid;
	grid-template-columns: 210px 220px 150px;
    grid-template-rows: 30px 85px 1fr 1fr;
    grid-template-areas:
        'title title title'
        'details details details' 
        'customer work finances'
        'device work invoice';
	background-color: #03a9f4b3;
	z-index: 2;
	font-size: 9pt;
	transition: opacity 0.5s;
	border-bottom: 5px solid #3f51b5;
}


@media screen and (width: 360px)
{
	.window
	{
		position: static;
		width: 360px;
		grid-template-columns: 1fr;
		grid-template-rows: 30px 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			'title'
			'details' 
			'customer'
			'device'
			'work' 
			'finances'
			 'invoice';
	}
	
	.window-details 
	{
		grid-area: details;
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 'details-col-1 date'
								'timer status';
		padding: 5px 0 0 5px;
	}
	
}

.window.hidden
{
	opacity: 0;
	visibility: none;
}

.window-title
{
	grid-area: title;
	padding: 9px 0 5px 30px;
    color: #000000;
    background-color: #ffffff;
}

.window-title.active
{
	background-color: #2196f3;
}

.title-icon
{
	position: absolute;
	left: 4px;
	top: 3px;
}

.title-icon img
{
	width: 16px;
	height: 16px;
}

.title-text
{
	cursor: default;
}

.title-button
{
	position: absolute;
    top: 0px;
    
    width: 45px;
    background-color: transparent;
}
.title-save-button
{
	right: 55px;
    padding: 0;
    width: 14px;
    height: 14px;
    top: 8px;
    background-image: url(../images/save.png);
    background-repeat: no-repeat;
}

.title-save-button:hover
{
    background-color: #006bff;
}

.title-close-button
{
	right: 0px;
}

.title-close-button:hover
{
	color: white;
	background-color: red;
}

.grid-area
{
	border: 5px solid #3f51b5;
	border-bottom: none;
	padding-right: 10px;
}


/* DETAILS */
.window-details select
{
    width: 55px;
    height: 22px;
}

.details-col-1 input[type="text"]
{
    width: 51px;
    height: 20px;
}

.window-details
{
	grid-area: details;
	
	display: grid;
	grid-template-columns:  120px 212px 122px 112px;
    grid-template-areas: 'details-col-1 date timer status';
	padding: 5px 0 0 5px;
}

.details-col-1
{
	grid-area: details-col-1;
	text-align: right;
}
.details-date
{
	grid-area: date;
	text-align: right;
}
.details-timer
{
	grid-area: timer;
	text-align: right;
}
.details-timer input
{
	padding: 1px 0 1px 0 !important;
    width: 66px;
    height: 20px;
    text-align: center;
}

.timer-start-stop button
{
	width: 31px;
}

.details-status
{
	grid-area: status;
	text-align: right;
	padding-right: 8px;
}

.reference:before
{
	content: "Ref: #";
}

.engineer:before
{
	content: "Engineer:";
}

.start-date:before
{
	content: "Start Date:";
}

.end-date:before
{
	content: "End Date:";
}

.timer:before
{
	content: "Timer:";
}

.completed:before
{
	content: "Completed:";
}

.collected:before
{
	content: "Collected:";
}
/* DETAILS */

/* CUSTOMER */


.window-customer input[type="text"]
{
	width: 130px;
}
.window-customer
{
	grid-area: customer;
	text-align: right;
}

.name:before
{
	content: "Name:";
}
.landline:before
{
	content: "Tel:";
}
.mobile:before
{
	content: "Mobile:";
}
.email:before
{
	content: "Email:";
}

.window-customer button
{
	width: 135px;
}
/* CUSTOMER */

/* Device */
.window-device input[type="text"]
{
	width: 130px;
}

.password-input
{
	width: 80px!important;
}

.window-device
{
	grid-area: device;
	text-align: right;
}

.type:before
{
	content: "Type:";
}
.brand:before
{
	content: "Brand:";
}
.model:before
{
	content: "Model:";
}
.year:before
{
	content: "Year:";
}
.username:before
{
	content: "User:";
}
.password:before
{
	content: "Pass:";
}
.reveal:before
{
	content: "Hide";
}
.reveal
{
	margin-left: 5px;
}
/* Device */


.window-work
{
	grid-area: work;
	/* display: grid; */
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* grid-template-rows: 41px 1fr; */
    /* grid-template-areas: */
        /* 'work-select work-select work-select' */
        /* 'faults parts tasks'; */
	position: relative;
	padding: 0px;
	border-left: none;
	border-right: none;
	overflow:hidden;
}

.window-work .grid-area
{
	border: none;
}

.work-select
{
	/* grid-area: work-select; */
	border-bottom: 5px solid #3f51b5 !important;
	padding: 0;
	text-align: center;
}

.work-select button
{
	width: 67px;
	margin: 3px;
	border-bottom: 4px solid transparent;
}

.work-select button.selected
{
	border-bottom: 4px solid #3f51b5;
}

.work-container
{
    position: relative;
	left:0px;
    height: 319px;
    transition: all 0.5s ease;

}
.work-container.faults
{
	transform: translateX(0px);
}

.work-container.parts
{
	transform: translateX(-220px);
}

.work-container.tasks
{
	transform: translateX(-440px);
}

.work-container select
{
	width: 100%;
}


.window-work input[type="text"] 
{
    width: 155px;
}


.work
{
    position: absolute;
    top: 0px;
    width: 200px;
    height: 299px;
    padding: 10px;
	text-align: right;
}

.work textarea
{
	height: 63px;
	margin-top: 3px;
	width: 195px;
}

.work button
{
	width: 64px;
}

.fault-fixed-label:before
{
	content: "Fixed:";
	//content: attr(data-tooltip);
}

.task-completed-label:before
{
	content: "Completed:";
}

.part-description
{
	width: 153px !important;
}

.part-url-label:before
{
	content: "URL:";
}

.window-faults
{
	left: 0px;
}

.window-parts
{
	left: 220px;
}

.part-url-label button
{
	width: 30px;
	height: 22px;
    padding: 0;
}

.part-url-label input
{
    width: 123px !important;
}

/* .part-price */
/* { */
	/* display: inline; */
/* } */
.part-price input
{
	width: 53px !important;
}

.part-cost-price:before
{
	content: "Cost: £";
	position: relative;
    left: 1px;
}
.part-sale-price:before
{
	content: "Sale: £";
	position: relative;
    left: 1px;
}

.part-status
{
	margin-bottom: 38px;
}

.part-status select
{
	width: 157px;	
}

.part-status:before
{
	content: "Status:";
	/* position: relative; */
    /* left: 1px; */
}

.window-tasks
{
	left: 440px;
}

.fault-description-label:before, .part-description-label:before, .task-description-label:before
{
	content: "Desc:";
}

.fault-notes-label, .task-notes-label
{
	text-align: left;
}

.window-finances
{
	grid-area: finances;
	text-align: right;
}

.window-finances input[type="text"], .window-finances select
{
	width: 68px;
}

.window-finances select
{
	enabled: false;
}

.quote:before
{
	content: "Quote: £";
}
.costs:before
{
	content: "Costs: £";
}
.profit:before
{
	content: "Profit: £";
}
.paid:before
{
	content: "Paid:";
}
.payment-method:before
{
	content: "Method:";
}

.window-finances select
{
	width: 71px;
    height: 22px;
}

.window-finances input[type="checkbox"]
{
	margin-left: 56px;
}

.window-invoice
{
	grid-area: invoice;
	text-align: center;
	padding: 5px;
}
.window-invoice button
{
	width: 125px;
	margin-bottom: 5px;
}