topHeader{
	font-family:arial;
	color:white;
	position:sticky;
	width:100%;
	top:0;
	background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
	z-index:103;
	display:flex;
	flex-direction:column;
	border-bottom:thin solid black;
}
logoholder{
	display:flex;
	align-items:center;
margin-bottom:5px;
}
topmenubutton{
	display:none;
}
logo{
	flex:20;
	font-size:1.4em;
	color:white;
	font-weight:bold;
	text-shadow:-1px 1px 1px black;
	font-family:arial;
	display:inline-block;
	letter-spacing:.5px;
	padding:5px 20px;
}
topLinks{
	flex:99;
}
topLinks a{
	padding:1px 5px;
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-family:arial;
	font-size:12pt;
	text-shadow: 1px 1px 1px black;
	padding:5px 10px;
	border-radius:2px;
	display:inline-block;
	border-radius:0px;
}
topLinks a:hover{
	display:inline-block;
	padding:5px 10px;
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-family:arial;
	font-size:12pt;
	background:rgba(0,0,0,0.5);
	transition:background 0.5s;
}


topLinks a:hover{
	display:inline-block;
	padding:5px 10px;
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-family:arial;
	font-size:12pt;
	background:rgba(0,0,0,0.5);
	transition:background 0.5s;
}




topLinks a[currentLink]{
	background:rgba(0,0,0,0.15);
	border:thin solid black;
}
topLinks a[currentLink]:hover{
	background:rgba(0,0,0,0.5);
}



.fa-chevron-circle-up{
	margin-left:10px;
}


routeHolder{
	display:block;
	border:thin solid black;
	border-radius:5px;
	margin-bottom:5px;
	padding:1px 5px;
	width: 100%;
    box-sizing: border-box;	
	display:grid;
	grid-template-areas:
	'name action'
	'address address'
	'phone phone'
	'problem problem'
	'appliance appliance'
	'scheduled scheduled'
	;
	grid-template-columns: 10fr 1fr;
	background:rgba(0,0,0,0.15);
	color:black;
	text-shadow:initial;
}
[grid="action"]{
	grid-area:action;
}


[routeSwitch] i{
	padding:1px 5px;
	font-weight: 100;	
}
[routeSwitch][value="1"] i{
	border-radius:5px;
	color:white;
	border:thin solid white;
	background:linear-gradient(#40D130,#85C92C);
}

[routeSwitch][value="0"] i{
	color:black;
}

routeHolder action[value="1"]:after{
		display:inline-block;
		padding:2px 5px;
		background:red;
		color:white;
		content:'remove';
}
routeHolder action[value="0"]:after{
		display:inline-block;
		padding:2px 5px;
		background:green;
		color:white;
		content:'Add';
}
routeHolder action[value]:hover{
	cursor:pointer;
	background-mix-mode:screen;
}

routeHolder action[value="-1"]:after{
		content:'';
}
routetech{
	display:block;
}
routeGroup{
	margin-bottom:20px;
}

distanceInfo{
	display:block;
	width:100%;	
}



companyinfo{
}

optionSelectorBar{
	display:flex;
	width:100%;
	font-family:arial;
}
[preText]:before{
	content: attr(preText)': ';
}
[afterArrow]:after{
	content: attr(value)' ▾';
}
[syncholder][afterArrow]:after{
	content: attr(value)' ▾';
	opacity:0;
}
/*
popUnderWindowHolder{
	display:none;
	background:rgba(0,0,0,0.0);
	position:absolute;
	top:100%;
	width:auto;
	left:-50px;
	padding:0px 50px 100px 50px;
}
*/



knowledgeBaseItem [label]:before{
	content: attr(label)':';
	padding-right:5px;
	font-weight:bold;
	text-transform: capitalize;
}



knowledgeBaseItem{
	display:inline-grid;
	margin:5px;
	border:thin solid black;
	grid-template-columns:1fr;
	grid-template-areas:
	'appliance'
	'make'
	'model'
	'problem'
	'corrective'
	'parts'	
}

knowledgeBaseItem partItem{
	display:grid;
	grid-template-columns:1fr;
	grid-template-areas:
	'partNumber'
	'partDescription'
	;
	margin-left:5px;
	
}













popUnderWindow{
	display:flex;
	flex-direction:column;
	min-width:200px;
	width:auto;
	background:rgba(0,0,0,0.5);
	background:var(--mediumBlueBG);
	z-index:101;
}
popUnderWindowSelector{
	border:thin solid black;
	width:auto;
	white-space:nowrap;
	cursor:pointer;
	padding:10px;
	font-family:arial;
}
popUnderWindowSelector:hover{
	background:var(--darkBlueBG);
	border:thin solid white;
	text-shadow:1px 1px black;
}

addCallOption , searchAllCallsOption , mapOption , routeOption , partStatusLocationOption , scheduledOption , inventoryOption{
	height:auto;
	min-height:12px;
	display: flex;
	align-items: center;  
	padding:0px 10px;
	position:relative;
	cursor:pointer;
}








filterByHolder , mapGroupHolder{
	width:100%;
	display:block;
}
[windowid="map"] windowHeader name {
	flex-direction:column;
}


filterByHolder popUnderWindowSelector , mapgroupdisplaybutton{
	background:none;
	border:thin solid black;
	width:auto;
	white-space:nowrap;
	cursor:pointer;
	padding:1px 10px;
	display:inline-block;
}
filterByHolder  popUnderWindowSelector:hover , mapgroupdisplaybutton:hover{
	background:rgba(0,255,255,1);
	border:thin solid black;
}
popunderwindowselector[check="1"]{
}
mapgroupdisplaybutton[showing="1"]{
	color:yellow;
}









scheduledCallDisplayHolder{
	display:block;
	margin:10px 2px;
}

scheduledCallDisplay{
	border:thin solid black;
	border-radius:5px;
	padding:5px;
	display:grid;
	grid-template-areas:
	'tech tech'
	'dateScheduled dateScheduled '
	'name name'
	'address city'
	'dateTaken dateTaken'
	'linkToHolder linkToHolder';
	box-shadow:2px 2px 4px rgba(0,0,0,0.5);
	background:rgba(0,0,0,0.15);
}

scheduledCallDisplay tech{
	display:inline-block;
	width:fit-content;
	font-family:arial;
	font-size:.9em;
}

scheduledCallDisplay linkToHolder{
	margin-top:5px;
}



scheduledCallDisplay name{	grid-area:name; }
scheduledCallDisplay dateScheduled{	grid-area:dateScheduled; font-size:1.2em; font-weight:bold;}
scheduledCallDisplay dateTaken{	grid-area:dateTaken; }
scheduledCallDisplay address{	grid-area:address; }
scheduledCallDisplay city{	grid-area:city; }
scheduledCallDisplay tech{	grid-area:tech; }
scheduledCallDisplay linkToHolder{	grid-area:linkToHolder; }





scheduledCallDisplay dateScheduled{
	
}	



displayModeIdentifier::after{
	content: attr(value);
}

addCallOption[openInNewWindowOption]{
	padding:0px 20px;
	background:linear-gradient(to bottom, #5BEB60 5%, #2DCC32 100%);
	background: var(--addNewItemBG);
	background-color:#AEF078;
	text-shadow:1px 1px 0px black;
	font-family:arial;
	font-weight:bold;
	border:thin solid black;
	border-bottom:0px;
	letter-spacing:1px;
	cursor:pointer;
	border-radius:0px 5px 0px 0px;
	box-shadow:inset 4px 4px 6px rgba(255,255,255,0.5);
	margin-left:0;
}
addCallOption:hover{
	border:thin solid white;
	border-bottom:none;
	box-shadow:none;
}

searchAllCallsOption:hover , mapOption:hover , partStatusLocationOption:hover , scheduledOption:hover , inventoryOption:hover{
}
[openInNewWindowOption]{
	background: rgba(0,0,0,0.25);
	border:thin solid white;
	border-bottom:none;
	border-radius:5px 5px 0px 0px;
	margin-left:5px;
}
[openInNewWindowOption]:hover{
	background: rgba(0,0,0,0.5);
}

addcalloption[openInNewWindowOption]:hover{
	background: var(--addNewItemBGHover);
}

i{
	margin-right:5px;
}




searchPageTop{
	display:block;
	padding:5px 10px;
}
searchPageTop input{
	width:100%;
}

searchHistoryContent{
	display:block;
	margin:5px;
}



goToTop{
	margin-left:auto;
	cursor:pointer;
	color:white;
	padding:5px 5px;
	text-align:center;
	width:auto;
	height:auto;
	width:auto;
	transition: min-width 1s;
	display:inline-block;
	min-width: 0;
	position:absolute;
	right:0;
	text-shadow:1px 1px 1px black;
}
goToTop a{
	color:white;
}

[displaymode][selected] , [sortBy][selected] , [filterBy][selected]{
	background:rgba(0,0,0,0.5);
}



optionSelectorBarHolder{
	display:contents;	
}


popUnderWindowHolder{
	display:flex;
	flex-direction:column;
}

topMenuSelector{
	padding:0px 5px;
	margin-left:20px;
	cursor:pointer;
	border:thin solid rgba(0,0,0,0);
	border-bottom:none;
	border-radius:5px 5px 0px 0px;
	position:relative;
}
topMenuSelector:hover{
	border:thin solid white;
	border-bottom:none;
	background: rgba(0,0,0,0.25);

}