*{
	padding:0px;
	margin:0px;
	scroll-behavior: smooth;
	box-sizing:border-box;
	letter-spacing:.5px;
}
body{
	background:#FAFAFA;
}
a{
	text-decoration:none;
}
body.noscroll{
	overflow:hidden;
}

.tableInfoHolder{
	display:contents;
}

.fas.fa-map-marker{
	-webkit-text-stroke: 1px black;
	margin-right:5px;	
    text-shadow: initial;
}

[grid="currentInventory"] inventorypartholder.hideItem{
	display:none;
}

newItem{
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    color: white;
    text-shadow: 1px 1px 1px black;
    padding: 2px 10px;
    border: thin solid black;
    border-radius: 5px;
}	


[sorttype="desc"]:after{
	font-family: 'Font Awesome\ 5 Free';
	font-weight: 900;
	content:'\f0dd';
}
[sorttype="asc"]:after{
	font-family: 'Font Awesome\ 5 Free';
	font-weight: 900;
	content:'\f0de';
}
[sortindex][sortType]{
	background:rgba(0,0,0,0.5);
	color:white;
	border-radius:5px;
	padding:0 5px;
}
.tableHeader [sortindex]{
	cursor:pointer;
}
.tableHeader [sortindex]:hover{
	color:white;
	border-radius:5px;
	padding:0 5px;
	background:rgba(0,0,0,0.25);
}

:root {
    --darkBlueBG:linear-gradient(to bottom, #63b8ee 5%, #81B7EB 10%, #468ccf 50% , #1D67AD 85% , #1E588F 100%);
	--mediumBlueBG:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
	--lightBlueBG:#d4e2f2;
	--addNewItemBG:linear-gradient(to bottom, #A1D490 5%, #68B34F 100%);
	--addNewItemBGHover:linear-gradient(to bottom, #79D45B 5%, #356625 100%);
	
	--removeItemBG:linear-gradient(to bottom, #E86658 5%, #D14D3F 100%);

	--lightBlueBGopacity:rgba(201,218,240,0.75);
	--mediumBlueBGopacity: linear-gradient(to bottom,  rgba(99,184,238,0.75) 5%, rgba(70,140,207,0.75) 100%);

	--tableEven:#b5c4d8;
	--evenOdd:#b5c4d8;

}
.flexC{
	display:flex;
	flex-direction:column;
}
.flexH{
	display:flex;
}
genericGrid{
	display:grid;
}

.asjs{
	align-self:center;
	justify-self:center;
}


[jsAction="scrollToCall"]{
	cursor:pointer;
	border-radius:5px;
	padding:0px 5px;
}
[jsAction="scrollToCall"]:hover{
	background:rgba(0,0,0,0.1);
}


paymentsDisplay{
	width:fit-content; 
	margin:2vw; 
	text-align:center; 
	display:grid;
	box-sizing: border-box;
	grid-template-columns:repeat(9, auto);
}
paymentsDisplay paymentsdisplay_headholder item{
	padding:3px 10px;
	border:1px solid black;
	color:white;
	text-shadow:1px 1px 1px black;
	background:linear-gradient(#F5CECE,#F08686);
	font-weight:bold;
	border-collapse:collapse;
}
paymentsdisplay_headholder:first-of-type item{
	position: relative;
	grid-column: 1 / -1;
}
paymentsdisplay_row , paymentsDisplay_headHolder{
	display:contents;
}

paymentsDisplay item{
	padding:3px 10px;
	border:1px solid black;
	display: flex;
    align-items: center;
    justify-content: space-evenly;	
}
updateFinishedHolder {
    position: absolute;
    right: 0;
    top: 0;
}
updatedFinishedInfo{
    border: thin solid black;
    padding: 1px 5px;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(255,255,255,0.6);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    position: relative;
    top: 0px;
	background: rgba(0,0,0,0.1);
    font-size: .9em;
}
updatedFinishedInfo:hover {
    box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.25);
    color: white;
}
updatedFinishedInfo:active {
    top: 1px;
    box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.25);
    color: white;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.3);
}




[grid="route"]{ grid-area:route;}
[grid="menuButton"]{ grid-area: menuButton; }
[grid="mapSwitch"]{ grid-area: mapSwitch; }
[grid="name"]{	grid-area: name;}
[grid="phone"]{grid-area: phone;}
[grid="city"]{	grid-area: city;}
[grid="address"]{grid-area: address;}
[grid="addressb"]{grid-area: addressb;}
[grid="appliance"]{grid-area: appliance;}
[grid="make"]{	grid-area: make;}
[grid="model"]{grid-area: model;}
[grid="serial"]{grid-area: serial;}
[grid="problem"]{grid-area: problem;}
[grid="correctiveAction"]{grid-area: corrective;}
[grid="parts"]{grid-area: parts;}
[grid="time"]{	grid-area: time;}
[grid="note"]{	grid-area: note;}
[grid="email"]{ grid-area: email;}
[grid="dateTaken"]{ grid-area: dateTaken; }
[grid="priority"]{ grid-area: priority; }
[grid="dateCompleted"]{ grid-area: dateCompleted; }
[grid="tech"]{ grid-area: tech;}
[grid="paid"]{ grid-area: paid;	}
[grid="gross"]{ grid-area: gross; }
[grid="net"]{ grid-area: net;}
[grid="workOrder"]{ grid-area: workOrder;}
[grid="paidBy"]{ grid-area: paidBy;}
[grid="billSent"]{ grid-area: billSent;}
[grid="scheduled"]{ grid-area: scheduled;}
[grid="status"]{ grid-area: status;}
[grid="callTag"]{ grid-area: callTag;}

/*
[grid="phoneID"]{ grid-area:phoneID;  }
[grid="phoneName"]{ grid-area:phoneName; }
[grid="phoneNumber"]{ grid-area:phoneNumber; }
[grid="phoneDescription"]{ grid-area:phoneDescription; }
[grid="phoneNote"]{ grid-area:phoneNote; }
[grid="phoneAction"]{ grid-area:phoneAction;}
*/

[grid="finishedInformation"]{ grid-area:finishedInformation;}
[grid="lastContact"]{ grid-area:lastContact;}
[grid="menuInfo"]{ grid-area:menuInfo;}
[grid="callStatus"]{ grid-area:callStatus;}
[grid="customerInfo"]{ grid-area:customerInfo;}
[grid="applianceInfo"]{ grid-area:applianceInfo;}


[grid="partDescription"]{ grid-area:partDescription;}
[grid="partNumber"]{ grid-area:partNumber;}
[grid="smallpart_pickedUpBy"]{ grid-area:smallpart_pickedUpBy;}
[grid="moreInfo"]{ grid-area:moreInfo;}
[grid="partsList"]{ grid-area:partsList;}
[grid="copay"]{ grid-area:copay;}

/*


*/







quickLookItem{
	white-space:nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	align-self: center;
    max-width: 100%;
    justify-self: center;
	display:block;
}

quickLookItemHolder{
	display:grid;
	width:100%;
}
quickLookItemHolder:nth-child(even) { }
quickLookItemHolder:nth-child(odd) { background: #b5c4d8; }



[jsAction=contentToggleButton]:after{
	content:'►';
	font-size: .7em;
    padding-left: 10px;

}
[jsAction=contentToggleButton][active]:after{
	content:'▼';

}
contentToggleContent{
	display:none;
}
[jsAction=contentToggleButton][active] ~ contentToggleContent{
	display:block;
	padding: 5px;
    border: 2px solid white;
    background: rgba(255,255,255,0.2);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    margin: 5px 0px;	
}







.genericButton{
	border:thin solid black;
	padding:1px 5px;
	display:inline-block;
	border-radius:4px;
	margin:3px 5px 3px 0px;
	cursor:pointer;
	background:rgba(255,255,255,0.6);
	box-shadow:2px 2px 5px rgba(0,0,0,0.3);
	position:relative;
	top:0px;
}
.genericButton:hover{
	box-shadow:2px 3px 5px rgba(0,0,0,0.3);
	background:rgba(0,0,0,0.25);
	color:white;
}
.genericButton:active{
	top:1px;
	box-shadow:2px 3px 5px rgba(0,0,0,0.3);
	background:rgba(0,0,0,0.25);
	color:white;
	box-shadow:0px 0px 0px rgba(0,0,0,0.3);
}
.genericButton[fakeselected]{
	top:0px;
	box-shadow:inset 2px 2px 2px rgba(0,0,0,0.3);
	background:rgba(0,0,0,0.45);
	background:rgba(68,127,156,0.75);
	color:white;
}
.genericButton.selected{
	top:0px;
	box-shadow:inset 2px 2px 2px rgba(0,0,0,0.3);
	background:rgba(0,0,0,0.45);
	background:rgba(68,127,156,0.75);
	color:white;
}



.loginButton{
	text-shadow: 1px 1px black;
	display:inline-block;
	cursor:pointer;
	position:relative;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	top:0px;

	border:thin solid black;


	background-blend-mode: difference;
	background:#58A9C4;
	font-family:arial;
	padding:1px 10px;
	color:white;
	font-weight:bold;
	letter-spacing:.5px;
	border-radius:2px;
	margin-left:10px;
}
.loginButton:hover{
	border:thin solid white;
}
.loginButton:active{
	border:thin solid black;
	top:1px;
	box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
}
.loginButton a{
	text-decoration:none;
	color:white;
}


.button{
	cursor:pointer;
	display:inline-block;
	padding:0px 5px;
	border-radius:5px;
	padding:2px 5px;
	border:thin solid rgba(255,255,255,1);
	color:black;
	background: rgba(255,255,255,0.6);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.75);
    position: relative;
    top: 0px;
	user-select: none;
	margin:4px;
	font-family:arial;
	font-size:0.9em;
	letter-spacing:1px;
}
.button:hover{
    box-shadow: 0px 3px 4px rgba(0,0,0,0.75);
    background: rgba(0,0,0,0.25);
    color: white;
}
.button:active{
	top: 1px;
    box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.25);
    color: white;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.3);
}



#upgradeBox{
	margin-top:20px;
	margin-bottom:20px;
}

.upgradeButton {
	-moz-box-shadow: 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
	box-shadow: 0px 1px 0px 0px #fff6af;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
	background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
	background-color:#ffec64;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.upgradeButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
	background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
	background-color:#ffab23;
}
.upgradeButton:active {
	position:relative;
	top:1px;
}

.flexC{
	display:flex;
	flex-direction:column;
}
.flexH{
	display:flex;
	font-family:arial;
}

.CC{
  align-items: center;
  justify-content: center;
}



.CCs{
	align-self:center;
	justify-self:center;
}





.orangeInput{
	background:linear-gradient(#FCEDE1, #FCD79A);
	border:thin solid gray;
	vertical-align:middle;
}



addNewItem , .genericAddButton , addItem{
	background: var(--addNewItemBG);
	border:thin solid black;
	font-weight:bold;
	text-shadow: 1px 1px black;
	color:white;
	font-family:arial;
	padding:1px 10px;
	margin:2px;
	display:inline-block;
	cursor:pointer;
	position:relative;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	top:0px;
	width: fit-content;	
	text-align:center;
}
addNewItem:hover , .genericAddButton:hover , addItem:hover{
	border:thin solid white;
}
addNewItem:active , .genericAddButton:active, addItem:active{
	border:thin solid black;
	top:1px;
	box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
}


removeItem{
	background: var(--removeItemBG);
	border:thin solid black;
	font-weight:bold;
	text-shadow: 1px 1px black;
	color:white;
	font-family:arial;
	padding:1px 10px;
	margin:2px;
	display:inline-block;
	cursor:pointer;
	position:relative;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	top: 0px;
	text-align:center;
}
removeItem:hover{
	border:thin solid white;
}
removeItem:active{
	border:thin solid black;
	top:1px;
	box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
}







mapHolder{
	display:block;
}






textarea:focus:invalid+tester popout{
	display:block;
}
hidden{
	display:none;
	display:block;
}
selector a , phoneSelector a{
	text-decoration:none;
	color:inherit;
}

selector , addressSelector , priorityselector , phoneSelector , modelSelector , .genericSelectItem{
	font-family:arial;
	display:flex;
	border:thin solid rgba(0,0,0,0);
	margin:1px 0px;
	padding:2px 5px;
	cursor:pointer;
	letter-spacing:1px;
	min-height:18px;
}
selector:hover , addressSelector:hover, priorityselector:hover , phoneSelector:hover , modelSelector:hover , .genericSelectItem:hover{
	border:thin solid white;
	text-shadow:1px 1px 0px black;
	background:var(--mediumBlueBG);
	color:white;
	box-shadow:inset -5px 5px 2px rgba(255,255,255,0.5);
	box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
selector[selected]{
	background: var(--darkBlueBG);
    border: thin solid black;
    box-shadow: inset 2px 2px 1px rgba(0,0,0,0.5);
    top: 1px;
    position: relative;
	color:white;	
}


selector:hover customcolorblock{
	text-shadow:none;
}





tech[filtered]{
	display:none;
}

saveInfoBox{
	position:fixed;
	bottom:-40px;
	left:0;
	width:100%;
	background:var(--mediumBlueBG);
	color:white;
	padding:5px 20px 2px 5px;
	border:thin solid black;
	z-index:100;	
	font-family:arial;
	text-shadow:1px 1px 0px black;
	transition: bottom .5s linear;
	z-index:1000;
}

saveInfoBox[show]{
	transition: bottom .5s linear;
	bottom:0;
}

saveInfoBox[show="2"]{
	background:red;
	bottom:0;
}


overallHolder{
	display:block;
	margin-top:20vh;
	margin-bottom:50vh;
}



	
groupNameDisplay{
	font-size:1.2em;
	border-radius:5px 15px 0px 0px;
	border:2px solid black;
	padding: 0px 20px 2px 10px;
	display:inline-block;
	font-weight:bold;
	border-bottom:none;
	cursor:pointer;
	position:relative;
	height:auto;
}
groupNameDisplay:after{
	content: ' 'attr(count);
}

groupNameDisplay:hover{
	background:linear-gradient(#F2F7D2,#F0EBB4);
}

overallholder groupNameDisplay[selected]{
	padding-top:5px;
    top: 2px;	
}




overallholder[page="ready"] groupNameDisplay[selected] , 
overallholder[page="ready"] group{
	background:#D2E7F7;
}
overallholder[page="ready"] groupNameDisplay{
	background:#7b9cb8;
}



overallholder[page="finished"] groupNameDisplay[selected] , 
overallholder[page="finished"] group{
    background: #C4C4C4;
}
overallholder[page="finished"] groupNameDisplay{
	background:#7c7c7c;
}



overallholder[page="billing"] groupNameDisplay[selected] , 
overallholder[page="billing"] group{
	background:#F7EABE;
}
overallholder[page="billing"] groupNameDisplay{
	background:#c0af77;
}



group{
	border:2px solid black;
	padding-bottom:20px;
	padding-left:1px;
	padding-right:1px;
	padding-top:20px;
	border-radius:0px 10px 10px 10px;
	box-shadow:0px 10px 10px 0px rgba(0,0,0,0.25);
	display:none;
	flex-direction:column;
}

group[selected]{
	display:flex;
}





nameDisplay{
	margin-top:5vh;
	display:block;
	padding:2px 5% 2px 10px;
	color:white;
	font-weight:bold;
	font-size:1.1em;
	font-family:arial;
	text-shadow: 1px 0px 1px black , -1px 0px 1px black , 0px 1px 1px black , 0px -1px 1px black ;
	border:1px solid black;
	border-bottom:none;
	border-left:none;
	border-radius:2px 10px 0px 0px;
	top: 0px;
	display:block;
	z-index:1;
	width:fit-content;
	position:relative;
}
nameDisplay[value=green]{
	background:linear-gradient(to bottom, #D8FFB8 5%, #C9F2A7 100%);
}
nameDisplay[value=red]{
	background:linear-gradient(to bottom, #F2D1D0 5%, #EDB5B4 100%);
}

nameDisplay[value=white]{
	background:linear-gradient(to bottom, white 100%, #F5F5F0 100%);
}
nameDisplay[value=blue]{
	background:linear-gradient(to bottom, #DEF5FC 5%, #B8EDFF 100%);
}
nameDisplay[value=yellow]{
	background:linear-gradient(to bottom, #FAF9B9 5%, #EDECA1 100%);
}
nameDisplay[value=orange]{
	background:linear-gradient(to bottom, #FFDDA3 5%, #F0C67D 100%);
}
nameDisplay[value=pink]{
	background:linear-gradient(to bottom, #F9D4FA 5%, #EBA8ED 100%);
}
nameDisplay[value=purple]{
	background:linear-gradient(to bottom, #EEE1F7 5%, #E1C6F5 100%);
}
nameDisplay[value=aqua]{
	background:linear-gradient(to bottom, #DCF9FC 5%, #AAEBF2 100%);
}
nameDisplay[value=brown]{
	background:linear-gradient(to bottom, #CFB7AB 5%, #BF9986 100%);
}





customcolorblock{
	padding: 1px 5px;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

[techColor]{
	padding:1px 5px;
}