
		
	/* Formatting for Main Body and SVG */
		
		
			body {
	
				background-color: #ffffff;
	
			}
			
			
			
			svg.generations_tree_container {
			
				width: 100%; 
				height: 100%;
	
				background-color: #ffffff;
	
				padding: 0;
				margin: 0;
			}
			
			
	/*  Formatting for Add Relation Form Modal */
	
			
			
			form#add_relation_form {
	
	
			}
	
	
			form#add_relation_form ul {
	
				list-style-type: none;
		
				padding-left: 0;
				margin-left: 0;
			}
	
	
			form#add_relation_form ul li {
	
				list-style-type: none;
		
				padding-left: 0;
				margin-left: 0;
			}
	
			form#add_relation_form ul li h3 {
	
		
				text-transform: capitalize;
	
			}
	
	
			form#add_relation_form ul li label {
	
		
	
			}
	
			
			
	/* Formatting for SVG 'ADD NEW' Card */
			
			
			
			g.card_add.card-female path {
			
				fill: #AD5496;
				
				stroke: #AD5496;
				stroke-width: 4.69px;
			}
			
			
			g.card_add.card-female:hover {
			
				cursor: pointer;
				
			}
			
			
			g.card_add.card-female:hover path {
			
				fill: #9D4E88;
				
				stroke: #9D4E88;
			}	
			
			g.card_add.card-male path {
			
				fill: #0072A0;
				fill: #0089C1;
				
				stroke: #0072A0;
				stroke-width: 4.69px;
			}
			
			
			g.card_add.card-male:hover {
			
				cursor: pointer;
			}
			
			
			g.card_add.card-male:hover path {
			
				fill: #0072A0;
				
				stroke: #0072A0;
			}	
			
			
		/* Formatting for SVG 'Male Relation Card */
		
		
			g.relative-card.card-male g.profile-image-container circle {
    		
    			fill:white;
    			
    			stroke:#B0D2E2;
    			stroke-width:4.68px;
    		
    		}
    		
    		
    		g.relative-card.card-male g.profile-image-container:hover circle{
    		
    			fill: #B0D2E2;
    			
    			cursor: pointer;
    		
    		}
    		
    		
    		g.relative-card.card-male g.profile-image-container:hover path {
    		
    			cursor: pointer;
    		
    		}
    		
    		g.relative-card.card-male g.relative-card-main path {
    		
    			fill: #ffffff;
    		
    			stroke: #2A79A5; 
    			stroke-width:4.69px;
    		}
    		
    		
    		
    		g.relative-card.card-male g.relative-card-main:hover path {
    		
    			fill: #B0D2E2;
    			
    			cursor: pointer;
    		
    		}
    		
    		
    		g.relative-card.card-male g.relative-card-main.selected path {
    		
    			fill: #CEE3ED;
    		}
    		
    		
    		g.relative-card.card-male g.relative-card-main:hover text {
    		
    			cursor: pointer;
    		
    		}
    		
    		
    		
    		g.relative-card.card-male .xsmall-circle {
    		
    			fill: #2A79A5; 
    		
    		}
    		
    		g.relative-card.card-male .bottom-control-panel {
    		
    			fill:rgb(42,121,165);
    		}
    		
    		g.relative-card.card-male .bottom-control-panel-triangle {
    		
    			fill:rgb(176,210,226);
    		}
    		
		
			g.relative-card.card-male g.add_relative {
    		
    			
    		
    		}
    		
    		
    		g.relative-card.card-male g.add_relative circle {
    		
    			 fill: #ffffff;
    		
    		}
    		
    		
    		g.relative-card.card-male g.add_relative:hover circle {
    		
    			 fill: #B0D2E2;
    			 
    			 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-male g.add_relative:hover path {
    		
    			 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-male g.edit_relative circle {
    		
    			 fill: #ffffff;
    		
    		}
    		
    		
    		g.relative-card.card-male g.edit_relative:hover circle {
    		
    			 fill: #B0D2E2;
    			 
    			 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-male g.edit_relative:hover path {
    		
    			cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-male g.set_profile_image circle {
    		
    			fill: #ffffff;
    			
    			stroke: black;
    			stroke-width: 1.72px;
    		}
    		
    		g.relative-card.card-male g.set_profile_image:hover circle {
    		
    			stroke: #B0D2E2;
    			fill: #B0D2E2;
    			
    			cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-male g.set_profile_image:hover path {
    		
    			cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-male g.add_generations_image circle {
    		 
    		 	 fill:rgb(42,121,165);
    			 stroke: #ffffff;
    			 stroke-width: 1.41px;
    		}
    		
    		
    		g.relative-card.card-male g.add_generations_image:hover circle {
    		 
    		 	 fill: #6DACD0;
    		 	 
    		 	 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-male g.add_generations_image:hover path {
    		
    			 cursor: pointer;
    		
    		}
    		
    		
    		g.relative-card.card-male g.choose_generations_image {
    		
    		
    		}
    		
    		
    		g.relative-card.card-male g.choose_generations_image:hover {
    		
    			cursor: pointer;
    		
    		}
    		
    		
    		g.relative-card.card-male g.choose_generations_image circle.control_grey {
    		
    			fill: #797979;
    		
    		}
    		
    		
    		g.relative-card.card-male g.choose_generations_image circle.control_grey.control_green {
    		
    			fill: #009900;
    		
    		}
    		
    		
    		g.relative-card.card-male g.choose_generations_image circle.control_grey.control_green.control_red {
    		
    			fill: #F20000;
    		
    		}
    		
    		
    		g.relative-card.card-male g.control_orange {
    		
    			fill: #F27D00;
    		
    		}
    		
    		
    		g.relative-card.card-male g.view_relation_info circle {
    		 
    		 	 fill:rgb(42,121,165);
    			 stroke: #ffffff;
    			 stroke-width: 1.41px;
    		}
    		
    		
    		g.relative-card.card-male g.view_relation_info:hover circle {
    		 
    		 	 fill: #6DACD0;
    		 	 
    		 	 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-male g.view_relation_info:hover path {
    		 
    		 	 cursor: pointer;
    		}
		
		
		/* Formatting for SVG 'Female' Relation Card  */
		
		
			g.relative-card.card-female g.relative-card-main path {
    		
    			fill: #ffffff;
    		
    			stroke: #9D4E88; 
    			stroke-width:4.69px;
    		}
    		
    		
    	/* Formatting for SVG 'Male Relation Card */
		
		
			g.relative-card.card-female g.profile-image-container circle {
    		
    			fill:white;
    			
    			stroke:#DFC3D8;
    			stroke-width:4.68px;
    		
    		}	
    		
    		
    		g.relative-card.card-female g.profile-image-container:hover circle{
    		
    			fill: #DFC3D8;
    			
    			cursor: pointer;
    		
    		}
    		
    		
    		g.relative-card.card-female g.profile-image-container:hover path {
    		
    			cursor: pointer;
    		
    		}
    		
    		
    		g.relative-card.card-female g.relative-card-main:hover path {
    		
    			fill: #DFC3D8;
    			
    			cursor: pointer;
    		
    		}
    		
    		
    		g.relative-card.card-female g.relative-card-main.selected path {
    		
    			fill: #CEE3ED;
    		}
    		
    		
    		g.relative-card.card-female g.relative-card-main:hover text {
    		
    			cursor: pointer;
    		
    		}
    		
    		
    		
    		g.relative-card.card-female .xsmall-circle {
    		
    			fill: #9D4E88; 
    		
    		}
    		
    		g.relative-card.card-female .bottom-control-panel {
    		
    			fill: #9D4E88;
    		}
    		
    		g.relative-card.card-female .bottom-control-panel-triangle {
    		
    			fill: #BE78AB;
    		}
    		
		
			g.relative-card.card-female g.add_relative {
    		
    			
    		
    		}
		
		
			g.relative-card.card-female g.add_relative circle {
    		
    			 fill: #ffffff;
    		
    		}
    		
    		
    		g.relative-card.card-female g.add_relative:hover circle {
    		
    			 fill: #DFC3D8;
    			 
    			 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-female g.add_relative:hover path {
    		
    			 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-female g.edit_relative circle {
    		
    			 fill: #ffffff;
    		
    		}
    		
    		
    		g.relative-card.card-female g.edit_relative:hover circle {
    		
    			 fill: #DFC3D8;
    			 
    			 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-female g.edit_relative:hover path {
    		
    			cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-female g.set_profile_image circle {
    		
    			fill: #ffffff;
    			
    			stroke: black;
    			stroke-width: 1.72px;
    		}
    		
    		g.relative-card.card-female g.set_profile_image:hover circle {
    		
    			stroke: #DFC3D8;
    			fill: #DFC3D8;
    			
    			cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-female g.set_profile_image:hover path {
    		
    			cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-female g.add_generations_image circle {
    		 
    		 	 fill: #9D4E88;
    			 stroke: #ffffff;
    			 stroke-width: 1.41px;
    		}
    		
    		
    		g.relative-card.card-female g.add_generations_image:hover circle {
    		 
    		 	 fill: #BE7BAE;
    		 	 
    		 	 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-female g.add_generations_image:hover path {
    		
    			 cursor: pointer;
    		
    		}
    		
    		
    		g.relative-card.card-female g.choose_generations_image {
    		
    		
    		}
    		
    		
    		g.relative-card.card-female g.choose_generations_image:hover {
    		
    			cursor: pointer;
    		
    		}
    		
    		
    		g.relative-card.card-female g.view_relation_info circle {
    		 
    		 	 fill: #9D4E88;
    			 stroke: #ffffff;
    			 stroke-width: 1.41px;
    		}
    		
    		
    		g.relative-card.card-female g.view_relation_info:hover circle {
    		 
    		 	 fill: #BE7BAE;
    		 	 
    		 	 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-female g.view_relation_info:hover path {
    		 
    		 	 cursor: pointer;
    		}
    		
    		
    		g.relative-card.card-female g.choose_generations_image circle.control_grey {
    		
    			fill: #797979;
    		
    		}
    		
    		
    		g.relative-card.card-female g.choose_generations_image circle.control_grey.control_green {
    		
    			fill: #009900;
    		
    		}
    		
    		
    		g.relative-card.card-female g.choose_generations_image circle.control_grey.control_green.control_red {
    		
    			fill: #F20000;
    		
    		}
    		
    		
    		g.relative-card.card-female g.control_orange {
    		
    			fill: #F27D00;
    		
    		}
    		
			
		