body { font-family: Segoe UI; color: Navy; padding: 0; margin: 0; }
body { font-size: 13.5px; background-color: #f3f3f3 }
table { font-size: 13px }

a { text-decoration: none; color: Blue; }
a:hover { color: Red }

nav { background: linear-gradient(120deg, 
	rgb(61, 116, 225) 0%, 
	rgb(136, 167, 216) 76%, 
	rgba(249,247,149,1) 76%, 
	rgba(252,176,69,1) 80%, 
	rgba(0, 189, 9) 80%); 
	padding: 0px 0 0px 36px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); position: relative; 
	margin: 0 -24px 0 -24px }	
nav ul { margin: 0; padding: 0; list-style-type: none; border: 0 solid red }
nav ul li { display: inline-block; margin-left: -4px; border: 0 solid gold }
nav ul li a { color: #fff; padding: 8px 8px 12px 6px; display: inline-block; border-radius: 0px; }
nav ul li.current a { background: #00404d; color: #fff; box-shadow: 1px 1px 2px rgba(0, 0, 0, .4) }
nav ul li a:hover { background: #005566; color: #fff; box-shadow: 1px 1px 2px rgba(0, 0, 0, .4) } 
nav ul li.user-menu { float: right; border: 0 solid red; color: #fff; margin-top: 5px; padding-right: 18px }
nav ul li.user-menu a { padding: 4px 4px 6px 4px; }
nav ul li.user-menu a:hover { background: none; border-radius: 0; box-shadow: 0 0 0; color: Navy; text-decoration: underline; }

header { border-bottom: 0px solid black; background-color: maroon; box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); 
	color: #fff; font-family: Eras ITC; margin: -24px -24px 0 -24px; z-index: 1; height: 170px }
header #sdolc { font-size: 2.2em; color: white; font-weight: 600; border: 0 solid red; text-shadow: 2px 2px rgba(0, 0, 0, .4); text-transform: uppercase;
	margin-top: 6px; text-align: center; border: 0 solid red ; display: inline-block }
header #title { margin: 0 0 0 22px; border: 0px solid green; font-size: 1.4em; text-shadow: 1px 1px rgba(0, 0, 0, .4); }
header .link-home #logo { border: 0 solid green; display: inline-block; width: 100%; height: 100%; 
	background-image: url(../images/sdocclogo1.png); background-size: 100px; background-repeat: no-repeat }

header .link-home { float: left; width: 110px; height: 100px; z-index: 100; 
	position: relative; } 
header .link-home:hover { text-decoration: underline; color: #eee; border: 0px solid red; } 
header .link-home:hover #logo { opacity: .95 }

header { background-image: url(../images/sdoccbanner.jpg); size:1280px; background-repeat: no-repeat }

#wrap { border: 0px solid red; width:1232px; background: #fff; padding: 24px 24px 96px 24px; margin: -10px auto 24px auto; 
	position: relative; z-index: 10; box-shadow: 0px 0px 4px rgba(0, 0, 0, .2); min-height: 480px }

footer { margin: 36px 0 0 -22px; font-size: 12px; position: absolute; bottom: 2px; border: 1 solid red; 
	padding: 12px 18px 12px 18px; width: 1240px; background-color: #ddd;
}

form.form div { margin: 0 0 6px 0; }
form.form div label { border: 0 solid red; width: 140px; float:left; margin: 2px 12px 0 0; text-align: right }
form.form [type=password],[type=text], form.form textarea, select { border: thin solid #555; padding: 6px 6px; font-family: Arial }
form.form [type=submit],form.form [type=button] { padding: 5px 6px }

table.table { border-collapse: collapse; width: 100%; font-size: .9em; table-layout: fixed; }
table.table td, table.table th { padding: 7px 7px } 
table.table td { border-bottom: thin solid #d5d5d5 }
table.table tr:last-child td { border-bottom: none } 
table.table th { text-align: left; border-bottom: 2px solid Navy; background: #d0d0d0 }
table.table tr:hover td { 
	background: rgba(223, 223, 223, 1.0);
	background: linear-gradient(180deg, rgba(223, 223, 223, 1.0), rgba(254, 254, 254, 1.0)); }
table.table tr:last-child:hover td { background: none }
table.table tr th:first-child, 
table.table tr td:first-child { padding-left: 24px }
table.table tr th:last-child, 
table.table tr td:last-child { padding-right: 24px }
table.table tr.no-border th { border-bottom: 0 }

table.table tr th:last-child { text-align: right;}
table.table tr td.action div { display: none; text-align: right }
table.table tr:hover td.action div { display: block }

table.clickable tr:hover { cursor: pointer }

span.edit-rec { background-image: url(../images/edit-rec.png); }
span.delete-rec { background-image: url(../images/delete-rec.png); }
span.view-rec { background-image: url(../images/view-rec.png); }
span.record { width: 12px; height: 12px; display: inline-block; border: 0px solid red; background-size: 12px; opacity: .4 }
span.record:hover { opacity: 1 }

form.input div select { padding: 5px 8px 5px 8px }
form.input div input { padding: 6px 8px 5.5px 8px }
form.input div [type=button],form.input div [type=reset],
form.input div [type=submit] { padding: 4px 8px 3.8px 8px }

.w40  { width: 40px }
.w70  { width: 70px }
.w180 { width: 180px }
.w320 { width: 320px }
.w240 { width: 240px }
.w480 { width: 480px }
.w120 { width: 120px }
.w90  { width: 90px }

.text-center { text-align: center }
.text-left { text-align: left }
.text-right { text-align: right }

.arrow::before { content: "\021E8"; }
.dot { margin-left: 6px; height: 7px; width: 7px; background-color: Blue; border-radius: 50%; display: inline-block; }
.dot5 { margin: 0 6px 1px 6px; height: 5px; width: 5px; background-color: Navy; border-radius: 50%; display: inline-block; }
.dot10 { margin-left: 6px; height: 10px; width: 10px; background-color: Blue; border-radius: 50%; display: inline-block; } 

.bg-red { background-color: Red }

/* paragraph format */
.pbody { width: 60%; text-indent: 24px }

/* applies to error messages that are displayed when an input control accepts wrong entry by user */
.error-msg { margin-left: 3px; color: Red }

.message p.body { margin:6px 0 0px;padding:0 0 0 0px;text-indent:9px;font-size:.9em;border:0px solid red; }

/* ToolTip classses */ 
.tooltip { display: inline-block; }
.tooltip .tooltiptext { margin-left:9px; width : 320px; visibility: hidden; background-color: #FFF;
    border-radius:4px; border: 1px solid #aeaeae; position: absolute; z-index: 1; padding: 5px; 
    margin-top : -15px; /* according to application */
	opacity: 0; transition: opacity 1s; }
.tooltip .tooltiptext::after { content: " "; position: absolute; top: 5%; 
	right: 100%; /* To the left of the tooltip */
    margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #aeaeae transparent transparent; }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

.pagination { padding: 8px 8px 8px 0px; }
.pagination .current,
.pagination a { text-decoration: none; border: thin solid gray; padding: 4px 4px; display: inline-block; text-align: center; min-width: 15px }
.pagination .current { font-weight: 600; background: #add }
.pagination a:hover { background: #add }

.unread-msg { display: inline-block; background: #f00; padding: 2px 6px; font-size: .7em; border-radius: 20px;
	color: #fff; position: absolute; margin-top: -9px; margin-left: -4px; font-weight: 600 }
.unread-msg span { display: block; padding-bottom: 1px; margin-top: -1px }