body {
	background-image: url("../images/background.jpg");
	background-position: center;
	background-size: cover;
	color: #000000;
	font-family: 'El Messiri', Tahoma, Geneva, sans-serif;
	margin: 0px;
	padding: 0px;
}
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }
  
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./webfonts/fa-brands-400.eot");
  src: url("./webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("./webfonts/fa-brands-400.woff2") format("woff2"), url("./webfonts/fa-brands-400.woff") format("woff"), url("./webfonts/fa-brands-400.ttf") format("truetype"), url("./webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./webfonts/fa-regular-400.eot");
  src: url("./webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("./webfonts/fa-regular-400.woff2") format("woff2"), url("./webfonts/fa-regular-400.woff") format("woff"), url("./webfonts/fa-regular-400.ttf") format("truetype"), url("./webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("./webfonts/fa-solid-900.eot");
  src: url("./webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("./webfonts/fa-solid-900.woff2") format("woff2"), url("./webfonts/fa-solid-900.woff") format("woff"), url("./webfonts/fa-solid-900.ttf") format("truetype"), url("./webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
color: #ff6600; 
font-size: 11px; }

.fa-star:before {
  content: "\f005"; }
  
body, input, textarea, select, a {
    font-size: 13px;
	
}
input {
	text-align: center;
}
.edit_input {
	font-family: 'El Messiri', Tahoma, Geneva, sans-serif;
	font-size: 13px;
	outline: 0;
	border-width: 0 0 1px;
	border-color: #cccccc
}
.edit_input:focus {
	border-color: green
}
.textarea_width {
	font-family: 'El Messiri', Tahoma, Geneva, sans-serif;
	width: 438px;
	height: 100px;
    border: 1px solid #cccccc; 
	text-align: justify;
    white-space: pre-line;
    -moz-text-align-last: right;
    text-align-last: right;
	line-height: 1.5;
}
a, a:visited, a b {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    text-decoration: none;
}
a img {
    border: none;
}
label {
    cursor: pointer;
}
/* header */

.header {
  background-color: #fff;
  box-shadow: 3px 3px 6px 0 rgba(0,0,0,.3);
  position: fixed;
  width: 100%;
  z-index: 99999;
  margin: 0;
  top: 0;
  height: 40px;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #ffffff;
}

.header li a {
  display: block;
  padding: 10px 30px 0;
  height: 30px;
  border-right: 1px solid #eeeeee;
  text-decoration: none;
  background-color: #ffffff;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 11px;
  padding: 4px 15px 0;
  margin:0px;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 19px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 300px;
  box-shadow: 3px 3px 6px 0 rgba(0,0,0,.3);
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

@media (min-width: 768px) {
  .header li {
    float: right;
  }
  .header li a {
	padding: 10px 20px 0;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

/* footer */ 
#footer {
    padding: 0 10px;
    border-top: 1px solid #DBDEE1;
    margin: 0;
    background: #fef6e6;
    box-sizing: border-box;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
}
.copyrights {
	width: 50%;
	margin: 0;
	text-align: right;
    white-space:nowrap;
}
.vonline {
	width: 25%;
	margin: 0;
	text-align: left;
    white-space:nowrap;
}
.version {
	width: 25%;
	margin: 0;
	text-align: left;
    white-space:nowrap;
}
.InfoDiv {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
    vertical-align: middle;
	visibility: hidden;
	width: 400px;
	height: 400px;
	background-color: #ffffff;
	-webkit-border-radius: 15px; 
	-moz-border-radius: 15px; 
	border-radius: 15px;
    border: 1px solid #DBDEE1; 
	padding: 0;
	position: absolute;
	z-index: 999999;
	overflow: hidden;
}
.Lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(10,10,10,.65);
  opacity: 0;
  visibility: hidden;
  transition: all 0.8s;
  z-index: 999998;
}
.show {
  opacity: 1 !important;
  visibility: visible !important;
}
.personal_photo_big {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#chart_div {
	margin: 0;
	padding: 0;
	overflow: auto;	
	font-size: 13px;
}
#chart_div2 {
	margin: 0;
	padding: 0;
	overflow-y: auto;	
	font-size: 13px;
}
.treekey {
	position: absolute;
	top: 50px;
	left: 50px;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
    vertical-align: middle;
	width: 100px;
	padding: 2px 0 0;
}
.printtreekey {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 2px 0 0;
	float: left;
	width: 100%;
}
.deaddiv {
	min-width: 40px;
	margin-left: 5px;
	padding: 2px 3px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	font-family: 'El Messiri', Tahoma, Geneva, sans-serif;	
	cursor: pointer;
	border: 2px solid #f7d08b;
    border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
	background-color: #faf4ae;
	background: -webkit-gradient(linear, left top, left bottom, from(#f6f2c4), to(#faf4ae));
}
.livediv {
	min-width: 40px;
	margin-left: 5px;
	padding: 2px 3px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	font-family: 'El Messiri', Tahoma, Geneva, sans-serif;	
	cursor: pointer;
	border: 2px solid #b5d9ea;
    border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
	background-color: #edf7ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#edf7ff), to(#cde7ee));
}
.subcontainer{
	display: flex;  
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;
	margin: 50px 0 0;
}
.subcontainer2{ 
	display: flex;  
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;
	margin: 70px 0 0;
}
.child_content {
	width: 450px;
	max-width: 450px;
	margin: 10px 10px 20px;
    background: #FFFFFF;
    border-radius: 7px;
    border: 1px solid #DBDEE1;        
    padding: 10px;
	text-align: right;
	line-height: 2;
}
.clear_div {
	clear: both;
	margin: 0;        
    padding: 0;
}
.input_div {	
	position:relative;
	clear: both;
	margin: 4px 0;        
    padding: 0;
	width: 100%;
}
.clear_hr {
	clear: both;
}
#edit_form_div {
	width: 100%;
	line-height: 2;
	margin: 5px 5px 0;
}
.info_div{
	float: right;
	margin: 5px 5px 0;
	word-wrap: break-word;
	max-width: 300px;
	width: 300px;
}
.picture_div{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
    vertical-align: middle;
	float: left;
	margin: 5px 0 5px 5px;
	width: 100px;
	height: 100px;
    border: 1px solid #b5d9ea;
    border-radius: 7px;
	cursor: pointer;
	overflow: hidden;
}
.edit_picture_div {
	float: left;
	margin: 0;
	padding: 0;
	width: 140px;
	height: 110px;
}
#f_picture_div {
	cursor: pointer;
}
.no_photo {
	float: right;
	margin: 35px 0 0;
	cursor: pointer;
}
.oldphoto {
	float: right;
	margin: 10px 0 0;
	cursor: pointer;
}
.person_photo {
	width: 100px;
	height: 100px;
	object-fit: cover;
}
.note_div{
	clear: both;
	margin: 0 5px;        
    padding: 0;
	text-align: justify;
	line-height: 1.5;
}
.width_250 {
	width: 250px;
}
.width_200 {
	width: 200px;
}
.width_150 {
	width: 150px;
}
.width_120 {
	width: 120px;
}
.width_100 {
	width: 100px;
}
.width_75 {
	width: 75px;
}
.hidden_element {
	display: none;
}
.childrenslist {
	clear: both;
	margin: 10px 0;        
    padding: 0;
}
.center_div {
	width: 100%;
	text-align: center;
}
.m10 {
	margin-top: 10px;
}
.m15 {
	margin-top: 15px;
}
.m50 {
	margin-top: 50px;
}
.m100 {
	margin-top: 100px;
}
.edit_button {
	float: left;
	cursor: pointer;
	margin: 0 0 5px;
}
.addeditby {
	float: right;
	border-top: 1px solid #000000;
}
.form_button {
	cursor: pointer;
	margin: 0 0 5px 10px;
    vertical-align: middle;
}
.delete_button {
	float: left;
	cursor: pointer;
	margin: 0 0 5px 0;
    vertical-align: middle;
}
.add_button {
	cursor: pointer;
	margin: 0;
    vertical-align: middle;
}
.message {
	width: 100%;
	margin: 10px 0 0;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin: 50px 0 0;
}
.maindiv {
	display: flex;  
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;
	margin: 50px 0 0;
}
.boxhome {
	flex-grow: 1;
	margin: 0;
	padding: 0;
}
.boxhomeinner {
	margin: 10px;
	padding: 10px;
    border: 1px solid #cccccc;
	background-color: #ffffff;
    border-radius: 7px;
}
.boxcontrol {
	overflow: auto;
	flex-grow: 2;
	margin: 10px;
	padding: 10px;
    border: 1px solid #cccccc;
	background-color: #ffffff;
    border-radius: 7px;
	text-align: center;
}
.reguestsbox {
	overflow: auto;
	flex-grow: 1;
	margin: 10px;
	padding: 10px;
    border: 1px solid #cccccc;
	background-color: #ffffff;
    border-radius: 7px;
	text-align: center;
}
.center_text {
	text-align: center;
}
.box {
	width: 250px;
	margin: 10px ;
	padding: 10px 10px 15px;
    border: 1px solid #cccccc;
	background-color: #ffffff;
    border-radius: 7px;
	text-align: center;
}
.boxshadow {
    box-shadow: 0 3px 8px #888;
}
.box_left {
	/* float: left;	 */
}
.box_right {
	/* float: right; */
}
.noaccess {
	font-size: 14px;
	font-weight: bold;
	line-height: 2;
}
.title {
	font-size: 16px;
	font-weight: bold;
	line-height: 2.5;
}
.title_regular {
	font-size: 14px;
	line-height: 2.5;
}
.print_title {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
.textright {
	text-align: right;
	margin: 5px;
	line-height: 2;
}
.textleft {
	text-align: left;
}
.margin_top{
	display: flex;  
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;
	margin-top: 5px;
}
.shadow_box {
	width: 250px;
	min-height: 150px;
	margin: 10px auto;
	padding: 10px;
    border: 1px solid #b5d9ea;
    -moz-border-radius: 5px;
    box-shadow: 0 3px 8px #888;
    border-radius: 7px;
	text-align: center;
	background-color: #ffffff;
}
.logout {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	font-size: 16px;
	font-weight: bold;
}
.childrenspan {
	cursor: pointer;
	display: block;
}
/****************SOCIAL****************/
.social{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
    vertical-align: middle;
}
.social a, .social a:visited, .social a b {
	color: white;
	font-size: 25px;
	text-decoration: none;
	cursor: pointer;
}
.social a:hover {
    text-decoration: none;
}
.link {
  background: #007bb5; 
}
.whatsapp {
  background: #12af0a; 
}
.telegram {
  background: #2ca5e0; 
}
.twitter {
  background: #55acee; 
}
.facebook {
  background: #3b5998; 
}
.email {
  background: #0495df; 
}
.fa {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
	padding: 4px;
	width: 22px;
	height: 22px;
	text-align: center;
	text-decoration: none;
	margin: 2px;
	border-radius: 5px;
}
.fa:hover {
    opacity: 0.7;
}
.fa img {
	width: 22px;
	height: auto;
}
#familytree_buttons {
	position: absolute;
	top: 50px;
	right: 50px;
	z-index: 9999;
}
#social_buttons {	
	/* position: relative; */
	margin: 0 0 10px;
}
.copydiv {
	position: absolute;
	top: 40px;
	color: red;
	margin: 0;
	text-align: center;
	border-radius: 5px;
	border: 1px solid #dd5347;
	background-color: #ffffff;
	width: 100px;
	display: none;
}
.boxtable {
	width: 100%;
	margin: 10px;
	padding: 0;
    border: 1px solid #cccccc;
	background-color: #ffffff;
    border-radius: 7px;
	text-align: center;
}
.albumbox {	
	display: flex;  
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;
	width: 100%;
	margin: 10px;
	padding: 0;
    border: 1px solid #cccccc;
	background-color: #ffffff;
    border-radius: 7px;
}
.albumtrees {
	text-align: center;
	line-height:2;
	width: 100%;
	margin: 10px;
	padding: 0;
    border: 1px solid #cccccc;
	background-color: #ffffff;
    border-radius: 7px;	
}
.tablewarb {
	overflow: auto;
	margin: 10px;
	padding: 0;
	background-color: #ffffff;
	text-align: center;
}
.mtable {
	width: 100%;
}
.mtable td {
    white-space:nowrap;
	padding: 0 10px;  
	position:relative;
	cursor:default;
}
.alt1 {
	background-color: #f8e9cb;
}
.alt2 {
	background-color: #ffffff;
}
#treename_settings {
	display: none;
}
.buttons_div {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
	margin: 10px 0;
	width: 100%;
}
.buttons_div * {
	margin: 0 10px;
}
.pagination{
display:inline-block;
padding-right:0;
margin:5px 0 0;
border-radius:4px
}
.pagination>li{
display:inline
}
.pagination>li>a,.pagination>li>span{
position:relative;
float:right;
padding:6px 12px;
margin-right:-1px;
line-height:1.42857143;
color:#337ab7;
text-decoration:none;
background-color:#fff;
border:1px solid #ddd
}
.pagination>li:first-child>a,.pagination>li:first-child>span{
margin-right:0;
border-top-right-radius:4px;
border-bottom-right-radius:4px
}
.pagination>li:last-child>a,.pagination>li:last-child>span{
border-top-left-radius:4px;
border-bottom-left-radius:4px
}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{
z-index:2;
color:#23527c;
background-color:#eee;
border-color:#ddd
}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{
z-index:3;
color:#fff;
cursor:default;
background-color:#337ab7;
border-color:#337ab7
}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{
color:#777;
cursor:not-allowed;
background-color:#fff;
border-color:#ddd
}
.pagination-lg>li>a,.pagination-lg>li>span{
padding:10px 16px;
font-size:18px;
line-height:1.3333333
}
.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{
border-top-right-radius:6px;
border-bottom-right-radius:6px
}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{
border-top-left-radius:6px;
border-bottom-left-radius:6px
}
.pagination-sm>li>a,.pagination-sm>li>span{
padding:5px 10px;
font-size:12px;
line-height:1.5
}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{
border-top-right-radius:3px;
border-bottom-right-radius:3px
}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{
border-top-left-radius:3px;
border-bottom-left-radius:3px
}
/************************************/
.tree, .tree ul, .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 2em 0;
    text-align: center;
}
.tree, .tree ul {
    display: table;
}
.tree ul {
  width: 100%;
}
.tree li {
display: table-cell;
padding: .5em 0 0;
vertical-align: top;
}
/* _________ */
.tree li:before {
	outline: solid 2px #2199e8;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 4px;
}
.tree li:first-child:before {right: 50%;}
.tree li:last-child:before {left: 50%;}

.tree span {
	display: inline-block;
	white-space: nowrap;
	margin: 8px 5px;
	position: relative;
	min-width: 40px;
	padding: 2px 3px;
	cursor: pointer;
	border: 2px solid #b5d9ea;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
	background-color: #edf7ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#edf7ff), to(#cde7ee));

}
.tree code.live {
	font-family: 'El Messiri', Tahoma, Geneva, sans-serif;
	justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	display: inline-block;
	margin: 8px 5px;
	position: relative;
	min-width: 40px;
	padding: 2px 3px;
	cursor: pointer;
	border: 2px solid #b5d9ea;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
	background-color: #edf7ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#edf7ff), to(#cde7ee));
}
.tree code.dead {
	font-family: 'El Messiri', Tahoma, Geneva, sans-serif;
	justify-content: center;
	align-items: center;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	display: inline-block;
	margin: 8px 5px;
	position: relative;
	min-width: 40px;
	padding: 2px 3px;
	cursor: pointer;
	border: 2px solid #f7d08b;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
	background-color: #faf4ae;
	background: -webkit-gradient(linear, left top, left bottom, from(#f6f2c4), to(#faf4ae));
}

	/* | */
	.tree ul:before,
	.tree code:before,
	.tree span:before {
		outline: solid 2px #2199e8;
		content: "";
		height: 6px;
		right: 50%;
		position: absolute;
	}
	.tree ul:before {
		top: -6px;
	}
	.tree code:before,
	.tree span:before {
		top: -10px;
	}

/* The root node doesn't connect upwards */
.tree > li {margin-top: 0;}
    .tree > li:before,
    .tree > li:after,
    .tree > li > code:before,
    .tree > li > span:before {
      outline: none;
    }
/****************************************************/
/****** tree2 *******/
.tree2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.tree2 ul {
  padding-right: 20px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.tree2 li {
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 5px 20px 5px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/*We will use ::before and ::after to draw the connectors*/

.tree2 li::before,
.tree2 li::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 50%;
  border-right: 3px solid #2199e8;
  width: 20px;
  height: 50%;
}
.tree2 li::after {
  bottom: auto;
  top: 50%;
  border-top: 3px solid #2199e8;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree2 li:only-child::after,
.tree2 li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree2 li:only-child {
  padding-right: 0;
}

/*Remove left connector from first child and 
right connector from last child*/
.tree2 li:first-child::before,
.tree2 li:last-child::after {
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree2 li:last-child::before {
  border-bottom: 3px solid #2199e8;
  border-radius: 0 0 5px 0;
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
}
.tree2 li:first-child::after {
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

/*Time to add downward connectors from parents*/
.tree2 ul ul::before {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  border-top: 3px solid #2199e8;
  width: 28px;
  height: 0;
}
.tree2 code {
	font-family: 'El Messiri', Tahoma, Geneva, sans-serif;
	justify-content: center;
	align-items: center;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.tree2 code.live a {
	white-space: nowrap;
	display: inline-block;
	margin: 8px 5px;
	min-width: 40px;
	padding: 2px 3px;
	cursor: pointer;
	border: 2px solid #b5d9ea;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
	background-color: #edf7ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#edf7ff), to(#cde7ee));
}
.tree2 code.dead a {
	white-space: nowrap;
	display: inline-block;
	margin: 8px 5px;
	min-width: 40px;
	padding: 2px 3px;
	cursor: pointer;
	border: 2px solid #f7d08b;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
	background-color: #faf4ae;
	background: -webkit-gradient(linear, left top, left bottom, from(#f6f2c4), to(#faf4ae));
}
/*********************************/
.relative_div {
	position: relative;
	margin: 0;
	padding: 0;
	background-color: red;
}
main {
	max-width: 650px;
	margin: 0 auto;
}
main summary {
	font-size: 15px;
	font-weight: bold;
	background-image: linear-gradient(to left, #ff9966, #ffffff);
	color: #000;
	padding: 5px;
	margin-bottom: 5px;
	outline: none;
	border-radius: 0.25rem;
	text-align: right;
	cursor: pointer;
	position: relative;
}
main p {
	text-align: justify;
	
}
details[open] summary ~ * {
	animation: sweep .5s ease-in-out;
}
@keyframes sweep {
	0%    {opacity: 0; margin-top: -10px}
	100%  {opacity: 1; margin-top: 0px}
}
main details > summary::after {
	position: absolute;
	content: "+";
	left: 20px;
}
main details[open] > summary::after {
	position: absolute;
	content: "-";
	left: 20px;
}
main details > summary::-webkit-details-marker {
	display: none;
}

@media only screen and (max-width: 768px) {
	.box {
		width: 100%;
		margin: 0 0 10px;
	}
	.box_right {	
		display: flex;  
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 90%;
	}
	.boxhome{
		flex-grow: 0;
		width: 95%;
	}
	.boxcontrol{
		flex-grow: 0;
		width: 85%;
		margin: 0 10px 10px;
	}
	.reguestsbox{
		flex-grow: 0;
		width: 85%;
		margin: 0 10px 10px;
	}
	.top5 {
		margin-top: 10px;
		white-space: pre;
	}
	#chart_div {
		margin: 40px 0 0;	
	}
	#familytree_buttons {
		right: 10px;
	}	
	.treekey {
		left: 10px;
	}
	.child_content {
		width: 90%;
		max-width: 450px;
		margin: 50px auto 0;
	}
	.InfoDiv {
		width: 300px;
		height: 300px;
	}
	.info_div{
		width: 100%;
	}
	.textarea_width {
		width: 100%;
	}
	.edit_input {
		width: 150px;
	}
	.boxtable {
		width: 90%;
	}
}