/* 
    Created on : Oct 31, 2019, 10:18:09 AM
    Author     : Kevin
*/

:root {
	color-scheme: light dark;
	--background: #fdfdfd;
	--badge-color: #f5f5f5;
	--box-background: #edeff4;
	--box-border: #d8dfea;
	--box-title: #d8dfea;
	--btn-background: #f5f5f5;
	--btn-border: #ccc;
	--btn-color: #666;
	--btn-hover-background: #ebebeb;
	--btn-hover-border: #adadad;
	--btn-hover-color: #333;
	--color-blue: #f0f8ff;
	--color-green: #f0fff0;
	--color-red: #fff5ee;
	--color-red-dk: #d45246;
	--color-yellow: #fff8dc;
	--color-white: #fff;
	--divider-background: #e5e5e5;
	--dropdown-background: #fdfdfd;
	--fa-blue: #9aa9c8;
	--fa-green: #7dc97d;
	--fa-red: #e5adad;
	--fa-yellow: #eacf8d;
	--fa-orange: #febe91;
	--fa-white: #fafafa;
	--footer: #999;
	--footer-border: #edeff4;
	--form-background: #fdfdfd;
	--form-border: #ccc;
	--form-color: #555;
	--head-color: #3b5998;
	--highlight: #666;
	--icon-opacity: 1;
	--icon-color: #9cabcb;
	--link-color: #3b5998;
	--link-hover: #5f7ec1;
	--modal-body: #fdfdfd;
	--modal-footer: #f5f5f5;
	--modal-head: #eee;
	--modal-header: #3b5998;
	--navbar-background: #3b5998;
	--pagination-border: #ddd;
	--pagination-hover: #f5f5f5;
	--pedigree-background: #edeff4;
	--pedigree-border: #ccc;
	--pedigree-border-blue: rgba(59, 89, 152, 0.5);
	--pedigree-border-green: rgba(0, 153, 0, 0.4);
	--pedigree-border-red: rgba(205, 92, 92, 0.4);
	--pedigree-border-yellow: rgba(218, 165, 32, .5);
	--photo-opacity: 1; /* male, female icon photos */
	--relation-color: #438551;
	--sidebar: #3b5998;
	--sidebar-link: #f9f9f9;
	--table-border: #ddd;
	--table-border-blue: #9aa9c8;
	--table-border-green: #7cc97c;
	--table-border-red: #e3aaaa;
	--table-border-yellow: #ecd28f;
	--table-hover: #f5f5f5;
	--table-stripe: #f9f9f9;
	--text-color: #444;
	--text-caption: #666;
	--timeline-background: transparent;
	--timeline-div: #edeff4;
	--tip-background: #edeff4;
	--tip-head-background: #2e3c58;
	--tip-head: #eee;
	--tip-subhead-background: #666;
}
@media (prefers-color-scheme: dark) {
	:root {
		--background: #333940;
		--badge-color: #f5f5f5;
		--box-background: #292f36;
		--box-border: #292f36;
		--box-title: #292f36;
		--btn-background: #333;
		--btn-border: #333940;
		--btn-color: #ccc;
		--btn-hover-background: #333;
		--btn-hover-border: #333;
		--btn-hover-color: #eee;
		--color-blue: #547da5;
		--color-green: #557d55;
		--color-red: #906767;
		--color-red-dk: #906767;
		--color-yellow: #9a984c;
		--color-white: #292f36;
		--divider-background: #333940;
		--dropdown-background: #292f36;
		--fa-blue: #51769b;
		--fa-green: #557d55;
		--fa-red: #876263;
		--fa-yellow: #9a984c;
		--fa-orange: #d27b3d;
		--fa-white: #dadada;
		--footer: #777;
		--footer-border: transparent;
		--form-background: #333;
		--form-border: #666;
		--form-color: #ccc;
		--head-color: #ddd;
		--highlight: #bbb;
		--icon-opacity: .5;
		--icon-color: #dadada;
		--link-color: #aaa;
		--link-hover: #fff;
		--modal-body: #333940;
		--modal-footer: #333940;
		--modal-head: #eee;
		--modal-header: #2e3c58;
		--navbar-background: #2e3c58;
		--pagination-border: #aaa;
		--pagination-hover: transparent;
		--pedigree-background: #292f36;
		--pedigree-border: #292f36;
		--photo-opacity: .5;
		--relation-color: #438551;
		--sidebar: #1a2027;
		--sidebar-link: #dadada;
		--table-border: #444;
		--table-border-blue: #547da5;
		--table-border-green: #557d55;
		--table-border-red: #906767;
		--table-border-yellow: #9a984c;
		--table-hover: transparent;
		--table-stripe: transparent;
		--text-color: #aaa;
		--text-caption: #999;
		--timeline-background: transparent;
		--timeline-div: #333;
		--tip-background: #292f36;
		--tip-head-background: #2e3c58;
		--tip-head: #ccc;
		--tip-subhead-background: #666;
	}
}

body.dark {
		--background: #333940;
		--badge-color: #f5f5f5;
		--box-background: #292f36;
		--box-border: #292f36;
		--box-title: #292f36;
		--btn-background: #333;
		--btn-border: #333940;
		--btn-color: #ccc;
		--btn-hover-background: #333;
		--btn-hover-border: #333;
		--btn-hover-color: #eee;
		--color-blue: #547da5;
		--color-green: #557d55;
		--color-red: #906767;
		--color-red-dk: #906767;
		--color-yellow: #9a984c;
		--color-white: #292f36;
		--divider-background: #333940;
		--dropdown-background: #292f36;
		--fa-blue: #51769b;
		--fa-green: #557d55;
		--fa-red: #876263;
		--fa-yellow: #9a984c;
		--fa-orange: #d27b3d;
		--fa-white: #dadada;
		--footer: #777;
		--footer-border: transparent;
		--form-background: #333;
		--form-border: #666;
		--form-color: #ccc;
		--head-color: #ddd;
		--highlight: #bbb;
		--icon-opacity: .5;
		--icon-color: #dadada;
		--link-color: #aaa;
		--link-hover: #fff;
		--modal-body: #333940;
		--modal-footer: #333940;
		--modal-head: #eee;
		--modal-header: #2e3c58;
		--navbar-background: #2e3c58;
		--pagination-border: #aaa;
		--pagination-hover: transparent;
		--pedigree-background: #292f36;
		--pedigree-border: #292f36;
		--photo-opacity: .5;
		--relation-color: #438551;
		--sidebar: #1a2027;
		--sidebar-link: #dadada;
		--table-border: #444;
		--table-border-blue: #547da5;
		--table-border-green: #557d55;
		--table-border-red: #906767;
		--table-border-yellow: #9a984c;
		--table-hover: transparent;
		--table-stripe: transparent;
		--text-color: #aaa;
		--text-caption: #999;
		--timeline-background: transparent;
		--timeline-div: #333;
		--tip-background: #292f36;
		--tip-head-background: #2e3c58;
		--tip-head: #ccc;
		--tip-subhead-background: #666;
}

html {color: var(--text-color); background: var(--background);}
body {color: var(--text-color); background: var(--background);}
a {color: var(--link-color);}
a.ibar {color: var(--icon-color);opacity: var(--icon-opacity);}
a:hover {color: var(--link-hover);}
h1, h2, h3, h4, h5, h6 {color: var(--head-color);}
.caption {color: var(--text-caption);}
.caption.ghost {opacity:.7}
select, textarea, input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="email"], .uneditable-input {color: var(--form-color);background: var(--form-background);border-color: var(--form-border);}
.input-prepend .add-on, .input-append .add-on {background-color: var(--btn-background); border-color: var(--btn-border); text-shadow: none;}
div.box {border-color: var(--box-border); background: var(--box-background);}
div.box div.title {background: var(--box-title);}
div.bluebox {background-color: var(--box-background);}

/*[class^="fa-"], [class*=" fa-"] {opacity: var(--icon-opacity);}*/
i.fa-male {color: var(--fa-blue);}
i.fa-female {color: var(--fa-red);}
i.fa-lock {color: var(--fa-orange);}
i.fa-circle {color: var(--fa-white); opacity:1}
i.fa-circle-thin {color: var(--link-color);}
i.fa-unproven {color: var(--color-red-dk);}

i.fa-blue {color: var(--fa-blue);}
i.fa-green {color: var(--fa-green);}
i.fa-red {color: var(--fa-red);}
i.fa-yellow {color: var(--fa-yellow);}
i.fa-user-male {color: var(--fa-blue);}
i.fa-user-female {color: var(--fa-red);}
i.fa-user-father {color: var(--fa-blue); opacity:.5}
i.fa-user-mother {color: var(--fa-red); opacity:.5}
/*i.fa-user-male, i.fa-user-female, i.fa-user-unknown {opacity: var(--icon-opacity);}*/
i.fa-child-male {color: var(--fa-blue);}
i.fa-child-female {color: var(--fa-red);}
.badge, .label {color: var(--badge-color);}
.badge-age {background-color: var(--table-border-blue);}
.badge-male {background-color: var(--table-border-blue);}
.badge-female {background-color: var(--table-border-red);}

.people-icon {opacity: var(--photo-opacity);}

div.navbar {background-color: var(--navbar-background);}
/*.navbar table {background-color: var(--navbar-background);}*/
/*#navcontainer {background-color: var(--navbar-background);}*/
.navbar table {background-color: transparent;}
#navcontainer {background-color: transparent;}
#nav li ul {background-color: var(--navbar-background);}
#sidebar {background: var(--sidebar); color: var(--text-color); border-right-color: var(--sidebar);}
#sidebar .header {background-color: var(--sidebar);}
#sidebar .section a {color: var(--sidebar-link);}
.btn {color: var(--btn-color); background-color: var(--btn-background); border-color: var(--btn-border);}
.btn:hover, .btn:focus, .btn:active, .btn.active, .open .dropdown-toggle.btn {color: var(--btn-hover-color);background-color: var(--btn-hover-background);border-color: var(--btn-hover-border);}
.btn-default {background-color: #4866a5; border-color: #4866a5; color: #fff;}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {color: var(--btn-hover-color);background-color: var(--btn-hover-background);border-color: var(--btn-hover-border);}
.caret {border-top-color: var(--btn-color);}
.navbar .btn-default {color: var(--btn-color);background-color: var(--btn-background);border-color: var(--btn-border);}
.navbar .btn-default:hover {color: var(--btn-hover-color);background-color: var(--btn-hover-background);border-color: var(--btn-hover-border);}
.dropdown-menu {background-color: var(--dropdown-background);}
.dropdown-menu a {color: var(--text-color);}
.dropdown-menu .divider {background-color: var(--divider-background); border-bottom:none}
#chart {border-color: var(--pedigree-border); background-color: var(--pedigree-background);}
div.ped {border-color: var(--pedigree-border);}
div.ped.white	{background: var(--color-white);}
div.ped.blue	{background: var(--color-blue); border-color: var(--pedigree-border-blue);}
div.ped.green	{background: var(--color-green); border-color: var(--pedigree-border-green);}
div.ped.red		{background: var(--color-red); border-color: var(--pedigree-border-red);}
div.ped.yellow	{background: var(--color-yellow); border-color: var(--pedigree-border-yellow);}
.ped-white {background: var(--color-white);}
.ped-blue {background: var(--color-blue); border-color: var(--pedigree-border-blue);}
.ped-green {background: var(--color-green); border-color: var(--pedigree-border-green);}
.ped-red {background: var(--color-red); border-color: var(--pedigree-border-red);}
.ped-yellow	{background: var(--color-yellow); border-color: var(--pedigree-border-yellow);}
hr {border-top: none; border-bottom-color: var(--table-border);}
.table th, .table td {border-top-color: var(--table-border);}
.table tbody tr:hover td, .table tbody tr:hover th {background-color: var(--table-hover);}
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {background-color: var(--table-stripe);}
td.border-blue {border-left-color: var(--table-border-blue);}
td.border-green {border-left-color: var(--table-border-green);}
td.border-red {border-left-color: var(--table-border-red);}
td.border-yellow {border-left-color: var(--table-border-yellow);}
table.individual-events td {border-top-color: var(--table-border);}
table.grid td {border-color: var(--table-border);}
.footer {border-top-color: var(--footer-border); color: var(--footer);}
#ir-relation {color: var(--relation-color);}
.relation {color: var(--relation-color);}
ul.pagination a {border-color: var(--pagination-border);}
ul.pagination .next a, ul.pagination .previous a {border-color: var(--pagination-border);}
.pagination a:hover, .pagination .active a {background-color: var(--pagination-hover);}
.page-side { background-color: var(--box-background);}
#tooltip {border: 1px solid var(--tip-head-background); background-color: var(--tip-background); box-shadow: 5px 5px 5px var(--tip-background); filter: none;}
#tooltip div.head {background-color: var(--tip-head-background); color: var(--tip-head);}
#tooltip div.subhead {background-color: var(--tip-subhead-background); color: var(--tip-head);}
#tooltip div.subhead span {color: var(--tip-head);}
.modal {background-color: var(--background);}
.modal-header {background-color: var(--modal-header); border-bottom-color: var(--modal-body);}
.modal-header i {color: var(--modal-head); opacity:1; text-shadow:none;}
.modal-body {background: var(--modal-body);}
.modal-footer {background-color: var(--modal-footer); border-top-color: var(--modal-body); box-shadow: none;}

ul.breadcrumb {background-color: var(--background); border: none; box-shadow: none;}
.breadcrumb li {text-shadow:none;}
.breadcrumb .divider {color: var(--text-caption);}
.form-actions {background-color: transparent;}

/* forced overrides */
div.spouse {border-top-color: var(--table-border) !important;}
.timeline ul {background: var(--background) !important;}
/*.timeline ul li {background: #9aa9c8 !important;}*/
.timeline ul li div {background: var(--timeline-div) !important;}
.timeline ul li:nth-child(odd) div::before {border-color: transparent var(--timeline-div) transparent transparent !important;}
.timeline ul li:nth-child(even) div::before {border-color: transparent transparent transparent var(--timeline-div) !important;}
/*.timeline ul li.in-view::after {background: #3b5998;}*/