/* serviam.css */
/*dark blue header of website 09304d
red buttons and boxes on website 880301
yellow orange font in buttons from website af4e20
Original blue 7992b0charcoal 636d79white FFFFFF
black 000000soft green c5d5cbtaupe 9fa8a3*/	
:root {		
	--background-color: #FFFFFF;
	--title-color: #dec328;
	--title-color-bg: #850303;
	--sidebar-color: #000000;
	--sidebar-color-bg: #ABB2B9;
	
	--button-color: #FFFFFF;
	--button-color-bg: #850303;
	--button-color-hover: #b0000c;
}	
html body 	{
	height: 98%;
	overflow: auto;
	font-family: Arial, Helvetica, sans-serif; 
	background-color: var(--background-color);
}	
textarea {font-family: Arial, Helvetica, sans-serif;}
div.grid      { /* container */
	position: relative;
	width: 760px; 	
	top: 25px;
	left: 180px  	
	}	
div.grid div  {
	float: left; 		
	height: 22px; 	
}	
div.con450	{ /* container */
	position: relative;
 	height: 23px;
	width: 450px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.con450 div {
	float: left;
	height: 23px;
}
div.con350	{ /* container */
	position: relative;
 	height: 23px;
	width: 350px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.con350 div {
	float: left;
	height: 23px;
}
div.con250	{ /* container */
	position: relative;
 	height: 23px;
	width: 250px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.con250 div {
	float: left;
	height: 23px;
}
div.left	{ /* container */
	position: relative;
 	width: 760px;
 	height: 23px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.left div {
	float: left;
	height: 23px;
}
div.left600p	{ /* container */
	position: relative;
 	width: 610px;
 	height: 23px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.left600p div {
	float: left;
	height: auto;
}
div.left600	{ /* container */
	position: relative;
 	width: 610px;
 	height: 23px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.left600 div {
	float: left;
	height: 23px;
}
div.left400	{ /* container */
	position: relative;
 	width: 410px;
 	height: 23px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.left400 div {
	float: left;
	height: 23px;
}
div.grow	{ /* container */
	position: relative;
 	height: 23px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.grow div {
	float: left;
	height: 23px;
}
div.detail	{ /* container */
	position: relative;
 	width: 1060px;
 	height: 23px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.detail div {
	float: left;
	height: 23px;
}
div.detailwide	{ /* container */
	position: relative;
 	width: 2120px;
 	height: 22px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.detailwide div {
	float: left;
	height: 22px;
}
div.detailhdr	{ /* container */
	position: relative;
 	width: 1060px;
 	height: 22px;
 	top: 0px;
 	padding: 3px 0px; 
	left: 0px;
 	font: 15px arial,sans-serif; 	
	border-radius: 5px 5px 0px 0px;
	background-color: var(--sidebar-color-bg);
}	
div.detailhdr div {
	float: left;
	height: 22px;
	color: var(--sidebar-color);
}
div.detailwidehdr	{ /* container */
	position: relative;
 	width: 2120px;
 	height: 22px;
 	top: 0px;
 	padding: 3px 0px; 
	left: 0px;
 	font: 15px arial,sans-serif; 	
	background-color: var(--sidebar-color-bg) ;
}	
div.detailwidehdr div {
	float: left;
	height: 22px;
	color: var(--sidebar-color);
}
div.landleft	{ /* container */
	position: relative;
 	width: 500px;
 	height: 22px;	
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.landleft div {
	float: left;
	height: 22px;
}	
div.sumline	{ /* container */
	position: relative;
 	width: 500px;
 	height: 5px;	
 	top: 0px;
 	left: 0px ;
 	font: 5px arial,sans-serif;
}	
div.sumline div {
	float: left;
	height: 5px;
}		
div.hdrlandleft { /* bar on top of landleft list */
	position: relative;
 	width: 500px;
 	top: 0px;
 	padding: 3px 0px; 
	left: 0px;
	height: 22px;
  	border-radius: 5px 5px 0px 0px;
 	background-color: var(--sidebar-color-bg);
}	
div.hdrlandleft div  {
	float: left;
	height: 22px;
	color: var(--sidebar-color);
}	
div.gap 	{ /* creates small vertical gap for spacing */
	position: relative;
 	width: 760px;
 	height: 5px;
 	font: 1px arial,sans-serif;
 	top: 0px;
 	left: 20px;
}	
div.hdrgrid { /* bar on to pof list */
	position: absolute;
 	width: 760px;
 	top: 5px;
 	padding: 3px 0px;
	left: 180px;
  	border-radius: 5px 5px 0px 0px;
 	background-color: var(--sidebar-color-bg);
}	
div.hdrgrid div  {
	float: left;
	color: var(--sidebar-color);
}		
div.hdrgridwide { /* bar on to pof list */
	position: absolute;
 	width: 1060px;
 	top: 5px;
 	padding: 3px 0px;
	left: 180px;
  	border-radius: 5px 5px 0px 0px;
 	background-color: var(--sidebar-color-bg);
}	
div.hdrgridwide div  {
	float: left;
	color: var(--sidebar-color);
}
div.solhdr { 
	position: absolute;
 	width: 1460px;
 	top: 5px;
 	padding: 3px 0px;
	left: 180px;
  	border-radius: 5px 5px 0px 0px;
 	background-color: var(--sidebar-color-bg);
}	
div.solhdr div  {
	float: left;
	color: var(--sidebar-color);
}
div.solhdr2 {
	position: absolute;
 	width: 1460px;
 	top: 25px;	
 	padding: 3px 0px;
	left: 180px;
  	border-radius: 0px 0px 0px 0px;
 	background-color: var(--sidebar-color-bg);
}	
div.solhdr2 div  {
	float: left;
	color: var(--sidebar-color);
}
div.audithdr { 
	position: absolute;
 	width: 1660px;
 	top: 5px;
 	padding: 3px 0px;
	left: 180px;
  	border-radius: 5px 5px 0px 0px;
 	background-color: var(--sidebar-color-bg);
}	
div.audithdr div  {
	float: left;
	color: var(--sidebar-color);
}
div.audithdr2 {
	position: absolute;
 	width: 1660px;
 	top: 25px;	
 	padding: 3px 0px;
	left: 180px;
  	border-radius: 0px 0px 0px 0px;
 	background-color: var(--sidebar-color-bg);
}	
div.audithdr2 div  {
	float: left;
	color: var(--sidebar-color);
}
div.auditdetail	{ /* container */
	position: relative;
 	width: 1660px;
 	height: 23px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.auditdetail div {
	float: left;
	height: 23px;
	cursor: pointer;
}
div.soldetail	{ /* container */
	position: relative;
 	width: 1460px;
 	height: 23px;
 	top: 0px;
 	left: 0px ;
 	font: 15px arial,sans-serif;
}	
div.soldetail div {
	float: left;
	height: 23px;
	cursor: pointer;
}		
div.landsitehdr { /* bar on top of contract list */
	position: absolute;
 	width: 1060px;
 	top: 380px;
 	padding: 3px 0px;
	left: 180px;
  	border-radius: 5px 5px 0px 0px;
 	background-color: var(--sidebar-color-bg);
}	
div.landsitehdr div  {
	float: left;
	color: var(--sidebar-color);
}	
.bkclr	{ background-color: #c9c9c9;}/* alternating line color for lists */
.color-label {color: #850303;}      
.to-right { text-align:right; }
.wrapper 	{		
	position: relative;
	top: 25px;
	left: 180px;
	width: 780px;
	height: 98%;
	overflow: auto;
}	
.wrapperwide 	{		
	position: relative;
	top: 25px;
	left: 180px;
	width: 1060px;
	height: 98%;
	overflow-x: hidden;
	overflow-y: auto;
}
div.dbox {
	position: relative;
	top:25px;
	left:180px;
	width: 760px;
	height: 400px;
	overflow: auto;
	}	
div.dbox div {
	float: left;
 	height: 22px;
		}				
div.title	{ /* Menu title on top of sidebar */
	position: absolute;
 	background-color: var(--title-color-bg);
 	color: var(--title-color);
 	text-align:center;
 	width: 150px;
 	padding: 5px 0px; 
 	border-radius: 5px;
	top: 5px;
 	left: 5px;
 }		
div.sidebar { /* menu bar on left of screen */
	position: absolute;
	top: 5px;
	left: 5px;
	width: 150px;
	height: 98%;
	 min-height: 700px;
	border-radius: 5px;
	color: #FFFFFF;
	background-color: #333333;
}	
.sidebarlink {
	text-decoration: none;
	color: #FFFFFF;
}		
div.rbartitle	{ /* Menu title on top of rightbar */
	position: absolute;
	background-color: var(--title-color-bg);
	color: var(--title-color);
	text-align:center;
	width: 250px;
	padding: 5px 0px;
	border-radius: 5px;
	top: 5px; 
	left: 950px;
}		
div.rightbar { /* menu bar on right of screen */
	position: absolute;
	top: 5px;
	left: 950px;
	width: 250px;
	height: 100%; 
	border-radius: 5px;
	color: var(--sidebar-color);
	background-color: var(--sidebar-color-bg);
}		
div.inputbox     { width: 300px; }	
input { width: 98% }	
div.inputboxsm  { width: 100px; }	
div select  { width: 300px; }	
[type="date"] {  border-radius: 3px; border:solid #b3b3b3 1px; }
input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}
.btn { 
	background-color: var(--button-color-bg);
	color: var(--button-color);
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width:150px;
}
.lrgbtn { 
	background-color: var(--button-color-bg);
	color: var(--button-color);
	padding: 5px 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width:100px;
	font: 10px arial,sans-serif; 
}
.medbtn { 
	background-color: var(--button-color-bg);
	color: var(--button-color);
	padding: 5px 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width:75px;
	font: 10px arial,sans-serif; 
}
.smbtn { 
	background-color: var(--button-color-bg);
	color: var(--button-color);
	padding: 5px 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width:50px;
	font: 10px arial,sans-serif; 
}
.tinybtn { 
	background-color: var(--button-color-bg);
	color: var(--button-color);
	padding: 5px 5px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width:35px;
	font: 10px arial,sans-serif; 
}
.container {/* Add a background color and somepadding around the login form */
	border-radius: 5px;
	background-color: var(--sidebar-color-bg); 
	color: var(--sidebar-color);
	padding: 20px;  height: 380px;
} /* When moving the mouse over the submit button,add a darker red color */
.btn hover { background-color: var(--button-color-hover);}		
.pointer {cursor: pointer;}
.smword { font: 12px arial,sans-serif; color: var(--title-color); }
div.col10   { width: 10px; }	
div.col25   { width: 25px; }	
div.col35   { width: 35px; }	
div.col50   { width: 50px; }	
div.col65   { width: 65px; }
div.col75   { width: 75px; }	
div.col90   { width: 90px; }	
div.col100  { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.col125  { width: 122px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.col150  { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }	
div.col175  { width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }	
div.col190  { width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.col200  { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.col250  { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }	
div.col250p  { width: 250px; height:auto;word-break: break-all; word-wrap: break-word;}	
div.col285  { width: 285px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }	
div.col300  { width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }	
div.col300p  { width: 300px; height:auto; word-break: break-all; word-wrap: break-word;}	
div.col350p  { width: 350px; height:auto;word-break: break-all; word-wrap: break-word;}	
div.col400  { width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}	
div.col350  { width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }	
div.col450  { width: 450px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }	
div.col500  { width: 500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.col600  { width: 600px; height:auto;}	
div.col1000  { width: 1000px; }