/*
	My own CSS overrides file
*/
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 0.9rem;
     font-weight: 400;
     line-height: 1.4;
     color: #212529;
     text-align: left;
 }
 
 body {
     padding-top: 60px;
 }

 /* For the Family Tree OrgChart - add some padding to the right */
.google-visualization-orgchart-table {
    /* border: 0;
    text-align: center; */
    padding-right: 10% !important;
}

 .btn,
 .lead,
 .form-control {
     font-size: 0.9rem;
     line-height: 1.4;
 }
 
 @media (max-width: 80%) {
     /* 979px*/
     body {
         padding-top: 0px;
     }
 }
 
 @media (min-width: 768px) {
     .bd-placeholder-img-lg {
         font-size: 3.5rem;
     }
 }
 
 .text-responsive {
     /* to have responsive text sizes */
     font-size: calc(75% + 0.5vw + 0.5vh);
 }
 
 .starter-template {
     /*    padding: 3rem 1.5rem;*/
     text-align: center;
 }
 
 #header {
     padding-top: 15px;
     display: flex;
     /* establish flex container */
     flex-direction: row;
     /* default value; can be omitted */
     flex-wrap: nowrap;
     /* default value; can be omitted */
     justify-content: space-between;
     /* switched from default (flex-start, see below) */
 }
 
 #header_left {
     width: 50%;
     float: left;
     text-align: left;
 }
 
 #header_right {
     width: 50%;
     float: right;
     text-align: right;
     /* padding-top: 3px;
     font-size: 0.75em;
     font-weight: bold;*/
 }
 
 .lowlight {
     color: gray;
 }
 
 .female {
     color: hotpink;
 }
 
 .Info {
     color: green;
 }
 
 .Warning {
     color: orangered;
 }
 
 #chart_div table,
 #chart_div tr,
 #chart_div td {
     /* To override the bootstrap "collapse" setting for the orgchart in chart-div that causes problems in chrome */
     border-collapse: separate;
 }