body[data-blur='Y']
{
	filter:blur(0.10rem) grayscale(1);

}
#oapi_main {
	background-color:white;
	min-height:600px;
	width:100%;
}
#oapi_nav {
/*	background-color:#424242 !important; */
	background-color:var(--api-theme-blue) !important;; /* */
	width: 80px;
	min-width: 80px;
	vertical-align:top;
	padding: 0 !important;
	padding-bottom:180px !important;
}
#oapi_nav ul li:nth-child(1) {
	text-align:center;
	text-decoration:underline;
}
#oapi_nav ul li:nth-child(1) img {
	float:right;
}
#oapi_nav li {
	color:white !important;
/*	font-weight:bolder !important;*/
	padding:0.25em !important;
}
#oapi_nav button  {
	width:100% !important;
	white-space:nowrap !important;
	text-align:left;
	background-color:var(--api-theme-blue);
	
	color:#ddd !important;
	font-weight:bolder !important;
	padding:0.5em !important;
}
#oapi_nav button:hover  {
	background-color:#626262 !important;
}
#oapi_nav button[data-tour='Y']  {
	border:thick dotted white !important;
}
#oapi_nav li > img {
	width:48px;
	vertical-align:middle;
	margin-right:0.25em;
}
#oapi_nav button > img {
	width:36px;
	vertical-align:middle;
	margin-right:0.25em;
}
#oapi_body {
	vertical-align:top;
	padding-left:2em !important;
}	
@media screen  and (max-width: 440px) {
#oapi_nav {
	width: 40px;
	min-width: 40px;
}
#oapi_nav li ,
#oapi_nav button {
	font-size:12px !important;
	font-weight:bolder !important;
	white-space:normal !important;
	padding-left:1px !important;
	padding-right:1px !important;
}
#oapi_nav li  {
	min-height:80px;
}
#oapi_nav li > img {
	width:36px;
	float:none !important;
	clear:right;
}
#oapi_nav li > img ,
#oapi_nav button > img {
	width:24px;
	display:block;
}
#oapi_body {
	padding-left:0.5em !important;
}}
/*
.oapi_nav_tiles {
	display:flex;
	  justify-content: center;
	
}
*/
.oapi_nav_tiles  {
	margin-top:3em;
}
.oapi_nav_tiles button  {
	height:200px;
	width:200px;
	vertical-align:top !important;
	text-align:center !important;
	padding-left:15% !important;
	padding-right:15% !important;
	margin-right:1em !important;
	margin-bottom:1em !important;
	cursor: pointer !important;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
.oapi_nav_tiles button[data-tour='Y']  {
	border:thick dotted white !important;
}
.oapi_nav_tiles button:hover  {
	box-shadow: 0 4px 4px 0 rgba(0,0,0,.28), 0 6px 2px -4px rgba(0,0,0,.4), 0 2px 10px 0 rgba(0,0,0,.24);
	border:thin solid black !important;
}
.oapi_nav_tiles img {
	margin-left:auto;
	margin-right:auto;
	width:48px !important;
}
.oapi_nav_tiles label {
	color:#ddd !important;
	font-weight:700 !important;
	font-size:120% !important;
}
@media screen  and (max-width: 840px) {
.oapi_nav_tiles button  {
	height:175px;
	width:175px;
}
.oapi_nav_tiles label {
	font-size:110% !important;
}
}
@media screen  and (max-height: 440px) {
.oapi_nav_tiles button  {
	height:122px;
}
}
@media screen  and (max-width: 440px) {
.oapi_nav_tiles button  {
	height:140px;
	width:122px;
}
.oapi_nav_tiles label {
	font-size:100% !important;
}
}
.oapi_nav_tiles button:hover label {
	color:white !important;
}

#oapi_filter td {
	padding-right:0.25em !important;
}
#oapi_filter input {
	margin-right:0.5em;
}
#oapi_filter input ,
#oapi_filter button {
	vertical-align:middle;
}
#oapi_filter button {
	margin-top:6px !important;
}
#checkall {
 width:1%;
 padding:0.1em 0 0.4em 0.25em !important;
}
#checkall button {
	font-size:24px !important;
	margin:0 !important;
	padding:0 !important;
	min-height:1.5em !important;
	min-width:1.5em !important;
	margin-left:0 !important;
	font-weight:bolder;
}
.checkme {
/*	vertical-align:top; */
}
.checkme label {
	padding:1em !important;
	width:24px;
	height:36px;
/*	display:inline-block !important; */
	background-color:blue !important;	
}
.checkme label:hover {
	background-color:red !important;	
}
div.smartcheck {
display:inline-block;
height:100% !important;
}
div.smartcheck input[type="checkbox"],
div.smartcheck input[type="radio"] {
-webkit-appearance:none;
height:1.5em;
width:1.5em;
cursor:pointer;
position:relative;
-webkit-transition: .10s;
border-radius:4em;
background-color:white !important;
border:thin solid black !important;
}
div.smartcheck input[type="checkbox"]:checked,
div.smartcheck input[type="radio"]:checked {
background-color:var(--api-theme-action) !important;
}
div.smartcheck input[type="checkbox"]:before, 
div.smartcheck input[type="checkbox"]:checked:before,
div.smartcheck input[type="radio"]:before, 
div.smartcheck input[type="radio"]:checked:before {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
line-height:1.5em;
text-align:center;
color:white;
}
div.smartcheck input[type="checkbox"]:checked:before,
div.smartcheck input[type="radio"]:checked:before {
content: '?';
}

table.api_data_edit {
	border:thin solid gray;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
	margin-bottom:1em;
	min-width:80%;
}
table.api_data_edit  {
	background-color:var(--api-data-background); /* rgb(238, 238, 238);  */
	margin-bottom:1em !important;
}
table.api_data_edit thead,
table.api_data_edit tr.subhead {
	background-color:var(--api-theme-blue); 
	border-top:thin solid gray;
	border-left:thin solid gray;
	border-right:thin solid gray;
}
table.api_data_edit thead th,
table.api_data_edit tr.subhead th {
	padding: 0.5em !important;
	vertical-align:bottom;
	color:white !important;
	font-weight:bolder;
}

table.api_data_edit tbody td {
	padding: 0.5em !important;
	vertical-align:top;
}
label[data-error='R'] ,
input[data-error='R'] ,
select[data-error='R'] ,
textarea[data-error='R'] {
	background-color:pink !important;
}

label[data-error='E'] ,
input[data-error='E'] ,
select[data-error='E'] ,
textarea[data-error='E'] {
	background-color:LightGreen !important;
}
input[data-error='R']::after ,
select[data-error='R']::after ,
textarea[data-error='R']::after {
	content: 'Required';
	position:absolute;
	height:150px;
	z-index:-1;
}
#api_messages {
	padding:0.5em !important;
}
#api_messages[data-severity='1'] {
	color:red !important;
	font-size:125%;
	font-weight:bolder;
}
.api_table_sort::after {
	content: " \021F5";
	/* content: " \02965"; */
	color:white;
/*	background-color:white !important; */
}
div.api_provider_picker {
	border:thin solid gray !important;
	padding:0.5em;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
button.api_providerpick {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/techicon48.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_provider_picker button,
#provider_search_area button {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/searchicon.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_provider_picker button[data-active='Y'] {
	background-image:
      url('https://online.ofa.org/ico/spinner.svg');
    background-color:white !important;
}
div#provider_search_results tbody tr:hover {
	background-color:rgb(255, 255, 255);
	cursor:pointer;
}
div.api_owner_picker {
	border:thin solid gray !important;
	padding:0.5em;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
button.api_ownerpick {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/ownerlogo24.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_owner_picker button {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/searchicon.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_owner_picker button[data-active='Y'] {
	background-image:
      url('https://online.ofa.org/ico/spinner.svg');
    background-color:white !important;
}
div#owner_search_results tbody tr:hover {
	background-color:rgb(255, 255, 255);
	cursor:pointer;
}
div.api_animal_picker {
	border:thin solid gray !important;
	padding:0.5em;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
button.api_animalpick {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/casesicon24.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_animal_picker button {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/searchicon.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_animal_picker button[data-active='Y'] {
	background-image:
      url('https://online.ofa.org/ico/spinner.svg');
    background-color:white !important;
}
div#animal_search_results tbody tr:hover {
	background-color:rgb(255, 255, 255);
	cursor:pointer;
}
div.api_breed_picker {
	border:thin solid gray !important;
	padding:0.5em;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
button.api_breedpick {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/casesicon24.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_breed_picker button {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/searchicon.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_breed_picker button[data-active='Y'] {
	background-image:
      url('https://online.ofa.org/ico/spinner.svg');
    background-color:white !important;
}
div#breed_search_results tbody tr:hover {
	background-color:rgb(255, 255, 255);
	cursor:pointer;
}
div.api_dnabp_picker {
	border:thin solid gray !important;
	padding:0.5em;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
button.api_dnabppick {
	height:24px;
	width:100px;
	background-image:
      url('https://online.ofa.org/ico/dnabp24.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_dnabp_picker button {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/searchicon.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_dnabp_picker button[data-active='Y'] {
	background-image:
      url('https://online.ofa.org/ico/spinner.svg');
    background-color:white !important;
}
div.api_case_picker {
	border:thin solid gray !important;
	padding:0.5em;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
button.api_casepick {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/searchicon.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_case_picker button {
	height:24px;
	width:24px;
	background-image:
      url('https://online.ofa.org/ico/searchicon.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
	background-color: var(--api-theme-action); /* %%ACTIONCOLOR%% */
	margin: 0.5em !important;
	border-radius: 5px;
    vertical-align:middle;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
div.api_case_picker button[data-active='Y'] {
	background-image:
      url('https://online.ofa.org/ico/spinner.svg');
    background-color:white !important;
}
div#case_search_results tbody tr:hover {
	background-color:rgb(255, 255, 255);
	cursor:pointer;
}

div#thumbnail_area {
	display:flex;
	flex-wrap: wrap;	
}
div#thumbnail_area div {
	margin: 0 1em 1em 0;
	border: thin solid gray;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
	cursor: pointer;
}
div#thumbnail_area span {
	display:inline-block;
	padding-left:0.5em;
	padding-right:0.5em;
/*	
	text-align:center;
	margin-left:auto;
	margin-right:auto;
*/	
	font-size:70%;
}
div#thumbnail_area img {
	background-color:white;
}
tr[data-closed='Y'] {
	text-decoration:line-through;
}
tr[data-closed='Y'] td:nth-last-child(1):after {
	content:" *CLOSED*";
	font-weight:bold;
	font-style:italic;
}
fieldset.dropzone {
	text-align:center;
	vertical-align:middle;
	width:80%;
	height:20em;
	border:thin solid gray;
}
fieldset.dropzone div {
	position:relative;
	top:48%;
	bottom:48%;
}
fieldset.dropzone[data-active='Y'] {
	border:3px dotted red !important;
	background-color:#fcc;
}
fieldset.dropzone[data-active='N'] {
	border:3px dotted black !important;
	background-color:silver;
}
fieldset.dropzone[data-active='A'] {
	border:3px dotted green !important;
	background-color:#cfc;
}
.eye_area[data-mode='D'] canvas {
	cursor: url('img/sketch2.png') 0 31,crosshair;
}
.eye_area[data-mode='E'] canvas{
	cursor: url('img/eraser2.png') 5 27,crosshair;
}
.eye_area[data-mode='D'] button[data-mode='D'] {
	display:none;
}
.eye_area[data-mode='E'] button[data-mode='E'] {
	display:none;
}