:root {
	--calloutcol: #D4454F
}

body,h1,h2,h3,p,th,td {font-family:sans-serif}


input[type=radio],input[type=checkbox] {border: 0px  }
a.addnew,a.delete,a.submit {cursor:pointer}
.opaque,.tipbg
{
    background-color:#000000;
    opacity:.5;
}
.tip {
	position: fixed;
	/*transition:all 0.1s ease;*/
	transition-delay:0.2s;
	border-top: 1px solid gainsboro;
	border-left: 1px solid gainsboro;
	border-right: 1px solid whitesmoke;
	background-color: #fdfdfd;
	padding: 5px;
	z-index:102;
}
.flex {display:flex}
.static {position:static}
.relative {position:relative}
.tipbg {
	position:fixed;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	width:100%;
	height:100%;
	z-index:101;
}
.shadow,.tip {
	-moz-box-shadow: 5px 5px 7px gainsboro;
	-webkit-box-shadow: 5px 5px 7px gainsboro;
	box-shadow: 5px 5px 7px gainsboro;
}

.deleteconfirm, .deletecancel {
	-moz-box-shadow: 5px 5px 7px gainsboro;
	-webkit-box-shadow: 5px 5px 7px gainsboro;
	box-shadow: 5px 5px 7px gainsboro;
	display: inline;
	color: white;
	width: 60px;
	border-radius: 3px;
	padding: 2px 9px;
	cursor: pointer;
	position: fixed;
}
.deleteconfirm {
	background-color: red;
}
.deletecancel {
	background-color: gray;
}

.white {background-color:white }
.white:hover { color:white; background-color:#ff9900}
.round4,.select,.selectinline,.delete { -webkit-border-radius: 4px; -khtml-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.round2 { -webkit-border-radius: 2px; -khtml-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.round8 { -webkit-border-radius: 8px; -khtml-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}

.value {text-align:right}
input.value::-ms-clear {
	display: none;
}
input.search::-ms-clear {
	display: none;
}

.grid td {
	border:1px solid gainsboro;
	padding:2px;
}
.grid th,.gridtop th
{
	border:1px solid silver;
	background-color:whitesmoke;
}
.grid,.gridtop
{
	border-collapse:collapse
}
.topalign TD
{
	vertical-align:top;
	padding:5px;
	
}
.calendar {
	width: 140px;
	padding:4px;
	border:1px solid gray;
	background-color: whitesmoke;
	cursor: pointer;
	background-image: url('images/calendar.png');
	background-position: center right 5px;
	background-repeat: no-repeat;
	background-size: 10px 10px;
	border-radius:3px;
}
.center
{
	text-align:center
}
.right 
{
	text-align:right
}
.bold {font-weight:bold}
.gray {background-color:Gray;color:white}
.black {background-color:black;color:white}
.narrow{height:20px;}
.border {border:1px solid gray}
.dbl {border-top:1px solid black;border-bottom:medium double black}
.single {border-top:1px solid black;border-bottom:1px solid black}
.collapse {border-collapse:collapse}
.w40 {width:40px} .w60 {width:60px} .w80 {width:80px} .w100 {width:100px} .w180 {width:180px} .w240 {width:240px} .w360 {width:360px}
.h40 {height:40px} .h60 {height:60px} .h80 {height:80px} .h100 {height:100px} .h180 {height:180px} .h240 {height:240px} .h360 {height:360px}

.flex {display:flex}
.flex.column {
	flex-direction: column
}
.flex.row {flex-direction:row}

.cols {flex-direction:column}


#debugdiv
{position:fixed;right:0px;width:650px;top:0px;height:80px;background-color:whitesmoke;z-index:1000;padding:5px;overflow-y:scroll;opacity:.5}


svg > g > g:last-child { pointer-events: none } /* This is for google charts to prevent tooltip flickering under the mouse*/

div.fxcallout_bg {
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	/*background-color:black;*/
	z-index:2900
}
div.fxcallout {
/*	height: 60px;
	width: 200px;
*/	
	max-width:300px;
	z-index: 5000;
	background-color: var(--calloutcol);
	position: fixed;
	color: #fff;
	padding: 10px;
	box-shadow: 0px 0px 17px 2px #292929;
	margin: 25px;
	min-height: 50px;
	border-radius: 5px;
	text-align:left;
	transition:all 0.5s;
	transform:scale(0);
}
.fxcallout.over {
	box-shadow: 0px -5px 17px 2px #292929;
}
.fxcallout.under {
	box-shadow: 0px 5px 17px 2px #292929;
}
.fxcallout.left {
	box-shadow: -5px 0px 17px 2px #292929;
}
.fxcallout.right {
	box-shadow: 5px 0px 17px 2px #292929;
}
.fxcallout.overright {
	box-shadow: 5px -5px 17px 2px #292929;
}
.fxcallout.overleft {
	box-shadow: -5px -5px 17px 2px #292929;
}
.fxcallout.underright {
	box-shadow: 5px 5px 17px 2px #292929;
}
.fxcallout.underleft {
	box-shadow: -5px 5px 17px 2px #292929;
}

.fxcallout::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 0.8em solid transparent;
	position: absolute;
}

.fxcallout.over::before {
	left: 45%;
	bottom: -19px;
	border-top: 10px solid var(--calloutcol);
}

.fxcallout.under::before {
	left: 45%;
	top: -19px;
	border-bottom: 10px solid var(--calloutcol);
}

.fxcallout.left::before {
	right: -19px;
	top: 40%;
	border-left: 10px solid var(--calloutcol);
}

.fxcallout.right::before {
	left: -19px;
	top: 40%;
	border-right: 10px solid var(--calloutcol);
}

.fxcallout.overright::before {
	left: 20px;
	bottom: -18px;
	border-top: 10px solid var(--calloutcol);
}

.fxcallout.overleft::before {
	right: 20px;
	bottom: -18px;
	border-top: 10px solid var(--calloutcol);
}
.fxcallout.underright::before {
	left: 20px;
	top: -18px;
	border-bottom: 10px solid var(--calloutcol);
}

.fxcallout.underleft::before {
	right: 20px;
	top: -18px;
	border-bottom: 10px solid var(--calloutcol);
}

.fxcallout_button {
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color: #ffffff;
	border-radius: 3px;
	border: 1px solid #dcdcdc;
	display: inline-block;
	cursor: pointer;
	color: #666666;
	font-family: Arial;
	font-size: 15px;
	font-weight: normal;
	padding: 3px 8px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #ffffff;
}

.fxcallout_button:hover {
	background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color: #f6f6f6;
	font-weight: normal;
}

.fxcallout_button:active {
	position: relative;
	top: 1px;
}