/* CUSTOM CODE */
:root {
  --main-color: #2F2F46;
  --menu-text: #919AA4;
  --grey-button: #E9E5E5;
  --grey-button-text: #474747;
  --header-text: #563D7C;
  --button: #38384E;
  --male: #bfc0c5;
  --female: #bfc0c5;
  --weight-color-male: #808080;
  --weight-color-female: #808080;
}

.px-2 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.fa-stack { font-size: 0.5em; }
i { /*vertical-align: middle;*/ }

.fa.fa-mars,
.fa.fa-venus {
  line-height: inherit !important;
}

.no-thumb {
  display: none;
}
.text-transparent {
  color: #000; /* Fallback for older browsers */
  color: rgba(0, 0, 0, 0);
}


@media (max-width: 767px ){
  .text-xs-center {
    text-align: center;
  }

  .pdb-title {
    text-align: center;
  }

  .navbar-header {
    max-height: 50px;
  }

}
.nav-logo {
  float: left;
}
.navbar #search {
  max-width: 185px;
}

#navbarMain i.fa,
#navbarMain svg.fa-fw {
  min-width: 20px;
}
.pdb-nav-logo {
  max-height: 34px;
  margin: 8px 0px 8px 0px;
  border-radius: 3px;
}

.pdb-title {
  font-family: 'Arizonia', cursive;
  font-size: 3.2em;
  text-shadow: 2px 2px 5px dimgrey;
}

.pdb-title a {
  text-decoration: none;
}

.pdb-stats-flat {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
}

footer {
  background-color: var(--header-text);
  color: rgba(255,255,255,0.5);
  bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 10;
  height: 1.5rem;
}

footer a,
footer a:hover {
  color: #fff;
}

.container, .container-fluid {
  margin-bottom: 1.5rem;
}

.nav-tabs > li, .nav-pills > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
   zoom:1; /* hasLayout ie7 trigger */
}

.pdb-title-block,
.pdb-buttonbar,
.pdb-row-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 10px 0px 10px 0px;
}

.pdb-search input {
  margin: 0px 5px 0px 5px;
}

.pdb-buttonbar .btn {
  margin: 5px;
}

/* FontAwesome Icon height fix */
.navbar-nav .fa::before,
.pdb-buttonbar .fa::before {
  line-height: 20px;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete {
  z-index: 9000;
}

#pdb-sidebar {
  /* don't forget to add all the previously mentioned styles here too */
  box-shadow: inset -3px 0px 3px -3px #ccc;
}

#pdb-sidebar .pdb-sidebar-header {
  padding: 20px;
}

#pdb-sidebar ul.nav {
  padding: 20px 0;
}

#pdb-sidebar ul p {
  padding: 10px;
}

#pdb-sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
  }
#pdb-sidebar ul li a:hover {
}

#pdb-sidebar ul li a.active, a[aria-expanded="true"] {
  color: #fff;
  background: rgb(147, 154, 161);
  border-radius: 3px;
}
ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: rgb(86, 61, 124);
}

label.dropdown-item {
  display: flex;
  justify-content: space-between;
}
label.dropdown-item input {
  margin-left: 5px;
}

/* Contact List */

.pdbContactList {
  margin-top: 10px; 
}

.pdbContactList-row {
  padding: 5px;
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to right,
      purple,
      rgba(255, 255, 255, 0)
    ) 100% 0 0 0;
}

.pdbContactList-col,
.pdbContactList-photo,
.pdbContactList-loc,
.pdbContactList-name,
.pdbContactList-types {
  padding: 1rem;
}

.pdbContactList .img-thumbnail {
  max-width: 165px;
}

.pdbContactList-methods {
  list-style: none;
  padding-left: 0;
}



.pdbContactList .name,
.pdbContactList .country,
.pdbContactList .message,
.pdbContactList .email,
.pdbContactList .facebook,
.pdbContactList .twitter,
.pdbContactList .linkedin {
  font-size: 1.5rem;
}

.pdbContactList .state {
  font-size: 1rem;
}
.pdbContactList .languages {
  font-size: 1.3rem;
  font-style: italic;
  margin-top: 1rem;
}

.pdbContacts-container, .pdbContacts-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-around;
}

.pdbContacts-item {
  width: 200px;
  height: 400px;
  margin: 20px;
}

.pdbContacts-item .card-body {
  overflow: hidden;
}

.pdbContacts-buttons {
  list-style: none;
}

#imageResult {
  max-width: 200px;
  max-height: 200px;
}

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
#upload {
  opacity: 0;
}

#upload-label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}

.image-area {
  border: 2px dashed rgba(255, 255, 255, 0.7);
  padding: 1rem;
  position: relative;
}

.image-area::before {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  z-index: 1;
}

.image-area img {
  z-index: 2;
  position: relative;
}


/* Profile Picture Edit */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%);
            transform: rotate(0deg) translate(-50%);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-50%);
            transform: rotate(360deg) translate(-50%);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%);
            transform: rotate(0deg) translate(-50%);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-50%);
            transform: rotate(360deg) translate(-50%);
  }
}
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  -webkit-animation: spin 0.35s infinite linear;
          animation: spin 0.35s infinite linear;
  border: 2px solid #707070;
  border-radius: 50%;
  border-top-color: white;
  height: 25px;
  -webkit-transform-origin: left;
          transform-origin: left;
  top: 45%;
  width: 25px;
}
.hidden-input {
  left: -999px;
  position: absolute;
}

.card-profile {
  margin-top: 100px;
  margin-bottom: 2rem;
}
.profile {
  *zoom: 1;
  background-color: white;
  border-radius: 2px;
  display: block;
  float: none;
  margin: 5px auto;
  overflow: hidden;
  padding-bottom: 20px;
  width: 400px;
}
.profile:before,
.profile:after {
  content: "";
  display: table;
}
.profile:after {
  clear: both;
} 
.about {
  font-family: Helvetica, "Helvetica Neue", "Tahoma";
  font-size: 12px;
  color: #adadad;
  line-height: 17px;
}
.image-wrapper {
  background: rgba(0, 0, 0, 0.2);
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  transition: bottom 0.15s linear;
  width: 100%;
}
.edit {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: white;
  cursor: pointer;
  font-size: 22px;
  top: 10px;
}
.profile-pic-wrapper {
  height: 120px;
}
.profile-pic {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 50%;
  border: 4px solid white;
  height: 210px;
  overflow: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 210px;
  top: 0;
}
.profile-pic img {
  box-sizing: border-box;
  height: 100%;
  left: 50%;
  max-height: 100%;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: all 0.15s ease-out;
  width: auto;
}
.profile-pic:hover .image-wrapper {
  bottom: 0;
}
/*.username {
  margin-top: 122px;
  text-align: center;
}
.user-info {
  *zoom: 1;
  padding: 8px;
  position: relative;
}
.user-info:before,
.user-info:after {
  content: "";
  display: table;
}
.user-info:after {
  clear: both;
}
body {
  background-color: #202020;
}
.container {
  margin: 40px auto 50px;
  max-width: 960px;
}*/
.layer {
  background-color: rgba(0, 0, 0, 0.25);
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.layer.visible {
  display: block;
}
.pdb-editprofile {
  margin-top: 130px;
}

/* SHOWS - RESULTS */

td.fa-col {
  font-size: 1.5rem;
  text-align: center;
}

td.sex {
  padding: 0px;
}

#dogs .input-narrow input,
#shows .input-narrow input, 
#showResults .input-narrow input,
#showJudging .input-narrow input,
#dogsBred .input-narrow input,
#dogsOwned .input-narrow input,
#dogsCoOwned .input-narrow input {
  max-width: 80px;
}

.dataTables_length {
  float: right;
}

.text-male {
  color: var(--male);
}

.text-female {
  color: var(--female);
}

.dog-header,
.mating-header {
  text-align: center;
  vertical-align: baseline;
}
.dog-header-title {
  font-size: calc(13px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(18px + (38 - 18) * ((100vw - 300px) / (1600 - 300)));
  vertical-align: baseline;
}

.dog-header-name {
  font-size: calc(18px + (38 - 18) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(18px + (38 - 18) * ((100vw - 300px) / (1600 - 300)));
  font-weight: 700;
  vertical-align: baseline;
}

.dog-header-sex svg.svg-inline--fa,
.dog-header-sex .fa {
  /*font-size: 2.5rem;*/
  font-size: calc(18px + (38 - 18) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(18px + (38 - 18) * ((100vw - 300px) / (1600 - 300)));
  vertical-align: baseline;
}

.card-header-mating {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.mating-header {
  margin: 10px 0 10px 0;
}
.mating-header-title {
  font-size: calc(12px + (22 - 12) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
  vertical-align: bottom;
}

.mating-header-name {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
  font-weight: bold;
  vertical-align: middle;
}

.mating-header-sex svg.svg-inline--fa,
.mating-header-sex .fa,
.mating-header-sex .fas  {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
    vertical-align: bottom;
}

.dog-form-options {
  justify-self: end;
}

.grid-details ul,
.grid-mating-profile ul,
.pedigree-siblings {
  list-style: none;
  padding-left: 0;
}

.grid-details .btn-group {
  margin-bottom: 10px;
}

.dog-label {
  font-weight: bold;
}

.dog-heading {
  display: block;
  font-weight: bold;
  font-size: 1.7rem;
}

.dog-kennelname {
  font-style: italic;
}

.imgContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dog-image {
  /*width: 100%;*/
  height: auto;
  max-width: 100% !important;
}

.detail-thumbs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.detail-thumb {
  padding: 5px;
  max-width: 20%;
}

.detail-no-image {
  text-align: center;
  font-size: 30vh;
  color: lightgrey;
}

.dog-thumb {
  max-width: 100%;
  max-height: 100%;
}

.dd-name {
  font-size: .8rem;
  line-height: 1rem;
}
.dd-regnr, 
.dd-country,
.dd-year {
  font-size: .8rem;
  line-height: 1rem;
}


#photos.dataTable .image img {
  max-width: 100%;
}

#statistics #regions_div,
#statistics #chart_div {
  height: 80vh;
}

#statistics #sankey_div {
  height: 300vh;
}


.grid-details .nav-tabs,
.grid-mating .nav-tabs,
.grid-detail2 .nav-tabs {
  font-size: 1.5em;
  font-weight: 700;
}



.flex-pedigree-header {
  display: flex;
  flex-direction:  row;
  justify-content:center;
  align-items: center;
  margin: 5px;
}

.flex-pedigree-header > div { margin-left: 10px; margin-right: 10px; }

#pane-matings div.wrapper {
  display: flex;
  justify-content: center;
}

.pedigree-container {
  border-bottom: 1px solid grey;
  border-right: 1px solid grey;
  border-left: 1px solid grey;
}

.pedigree-profile {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: span 2; 
  border-top: 1px solid grey;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*align-items: center;*/
  background-color: white;
}

.pedigree-profile-float {
  width: 100%;
  text-align: center;
  display: block;
  position: relative;
}

@supports (position: sticky) {
  .pedigree-profile-sticky {
    justify-content: flex-start;
  }

  .sticky-profile {
    position: sticky;
    top: 40vh;
  }
}

.pedigree-profile-picture-frame {
  padding: 1px;
}
.pedigree-profile-picture {
  max-width: 100%;
}

.pedigree-profile-words {
  display: block;
  position: relative;
  min-height: 3rem;
}

.pedigree-profile-title {
  display: block;
  font-size: .8rem;
  font-weight: 700;
}

.pedigree-profile-name {
  display: block;
}

.pedigree-profile-hunting {
  display: block;
  font-size: .8rem;
  font-weight: 700;
}

.pedigree-profile-year {
  display: block;
  min-height: 1rem;
}

.pedigree-profile-regnr,
.pedigree-profile-other {
  display: block;
}

.pedigree-profile-offspring {
  display: block;
}
.pedigree-profile-colour {
  margin: 0 1px 1px 0;
  height: 1rem;
  width: 1rem; 
  /*border-radius: 50%;*/
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: .5;
  background: lightgray;
}
.pedigree-sibling-colour {
  margin: 0 1px 0 1px;
  height: 1rem;
  width: 1rem; 
  display: inline-block;
  position: relative;
  opacity: .5;
  background: lightgray;
}
.pedigree-profile-colour:hover,
.pedigree-sibling-colour:hover {
  opacity: 1;
}

/* COLOURS */
.colour-red, .colour-gold, .colour-fawn, .colour-apricot { background: orangered; }
.colour-black { background: black; }
.colour-silver { background: grey; }
.colour-cream, .colour-white { background: blanchedalmond }
.colour-black_and_tan, .colour-black_and_gold { background-image: linear-gradient(90deg, black, peru, white, peru, black); }
.colour-black_and_cream, .colour-black_and_white { background-image: linear-gradient(90deg, black, blanchedalmond, white, blanchedalmond, black); }
.colour-black_and_silver, .colour-black_and_brindle { background-image: linear-gradient(90deg, black, grey, white, grey, black); }
.colour-blue { background: steelblue; }
.colour-blue_brindle { background-image: linear-gradient(90deg, steelblue, lightgray, steelblue, lightgray, steelblue); }
.colour-blue_and_tan { background-image: linear-gradient(90deg, steelblue, peru, white, peru, steelblue); }
.colour-brindle, .colour-red_brindle { background-image: linear-gradient(90deg, black, orangered, black, orangered, black, orangered, black); }

/* PATTERNS */
.pattern-black_mask,
.pattern-mask {border: solid black 3px;}
.pattern-shaded_mask {border: solid gray 3px;}
.pattern-brindle {border: dotted black 3px;}
.pattern-domino {border: solid 3px; border-image: linear-gradient(0deg, rgb(255,255,255), rgb(0,0,0)) 1;}

.pedigree-profile-appearances {
  padding: 0 5px 0 5px;
  font-size: .7rem;
  border-radius: 50%;
  margin: 0 1px 1px 0;
  position: absolute;
  right: 1.1rem;
  bottom: 0;
  color: white;
  background-color: var(--menu-text);
}

.pedigree-profile-landofbirth {
  padding: 0 1px 0 1px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.pedigree-profile-landofbirth img {
  height: 1rem;
  opacity: .5;
}

.pedigree-profile-landofbirth img:hover {
  opacity: 1;
}

@supports (display: grid) {
  @media screen and (max-width: 599px) {
    .grid-details {
      display: grid;
      grid-template: 
          [row1-start] "header" 60px [row1-end]
          [row2-start] "detail2" auto [row2-end]
          [row3-start] "detail1" auto [row3-end]
          [row4-start] "detail3" auto [row4-end]
          [row5-start] "pedigree" auto [row5-end]
          [row6-start] "footer" 40px [row6-end]
          / 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: .25rem;
    }

    .grid-person {
      display: grid;
      grid-template: 
          [row1-start] "header" 20px [row1-end]
          [row2-start] "detail1" auto [row2-end]
          [row3-start] "detail2" auto [row3-end]
          [row4-start] "footer" 40px [row4-end]
          / 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: .25rem;
    }
    .grid-mating {
      display: grid;
      grid-template: 
          [row1-start] "header" 60px [row1-end]
          [row2-start] "male" auto [row2-end]
          [row3-start] "female" auto [row3-end]
          [row4-start] "pedigree" auto [row4-end]
          [row5-start] "footer" 40px [row5-end]
          / 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: .25rem;
    }
    .grid-mating-profile {
      display: grid;
      grid-template: 
          [row1-start] "header" 60px [row1-end]
          [row2-start] "detail1" auto [row2-end]
          [row3-start] "detail2" auto [row3-end]
          [row4-start] "detail3" auto [row4-end]
          / 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: .25rem;
    }
    
    .card-body {
      padding: .25rem;
    }
    .container-fluid {
      padding-left: .25rem;
      padding-right: .25rem;
    }
    .pedigree-profile-words {
      font-size: .7rem;
    }
    .pedigree-profile-title {
      font-size: .65rem;
      font-weight: 700;
    }
	.pedigree-profile-hunting {
      font-size: .65rem;
      font-weight: 700;
    }
    .pedigree-profile-landofbirth img {
      height: .5rem;
    }
  }

  @media screen and (min-width: 600px)  and (max-width: 767px) {
    .grid-details {
      display: grid;
      grid-template: 
          [row1-start] "header" 60px [row1-end]
          [row2-start] "detail2" auto [row2-end]
          [row3-start] "detail1" auto [row3-end]
          [row4-start] "detail3" auto [row4-end]
          [row5-start] "pedigree" auto [row5-end]
          [row6-start] "footer" 40px [row6-end]
          / 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }

    .grid-person {
      display: grid;
      grid-template: 
          [row1-start] "header" 20px [row1-end]
          [row2-start] "detail1" auto [row2-end]
          [row3-start] "detail2" auto [row3-end]
          [row4-start] "footer" 40px [row4-end]
          / 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }
    .grid-mating {
      display: grid;
      grid-template: 
          [row1-start] "header" 60px [row1-end]
          [row2-start] "male" auto [row2-end]
          [row3-start] "female" auto [row3-end]
          [row4-start] "pedigree" auto [row4-end]
          [row5-start] "footer" 40px [row5-end]
          / 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }
    .grid-mating-profile {
      display: grid;
      grid-template: 
          [row1-start] "header header" 60px [row1-end]
          [row2-start] "detail1 detail1" auto [row2-end]
          [row3-start] "detail2 detail3" auto [row3-end]
          / 1fr 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .grid-details {
      display: grid;
      grid-template: 
          [row1-start] "header header" 60px [row1-end]
          [row2-start] "detail2 detail2" auto [row2-end]
          [row3-start] "detail1 detail3" auto [row3-end]
          [row4-start] "pedigree pedigree" auto [row4-end]
          [row5-start] "footer footer" 40px [row5-end]
          / 1fr 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }
    .grid-person {
      display: grid;
      grid-template: 
          [row1-start] "header" 20px [row1-end]
          [row2-start] "detail1" auto [row2-end]
          [row3-start] "detail2" auto [row3-end]
          [row4-start] "footer" 40px [row4-end]
          / 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }
    .grid-mating {
      display: grid;
      grid-template: 
          [row1-start] "header header" 60px [row1-end]
          [row2-start] "male female" auto [row2-end]
          [row3-start] "pedigree pedigree" auto [row3-end]
          [row4-start] "footer footer" 40px [row4-end]
          / 1fr 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }
    .grid-mating-profile {
      display: grid;
      grid-template: 
          [row1-start] "header" 60px [row1-end]
          [row2-start] "detail1" auto [row2-end]
          [row3-start] "detail2" auto [row3-end]
          [row4-start] "detail3" auto [row4-end]
          / 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }
  }

  @media screen and (min-width: 1200px) {
    .grid-details {
      display: grid;
      grid-template: 
          [row1-start] "header header header" 60px [row1-end]
          [row2-start] "detail1 detail2 detail3" auto [row2-end]
          [row3-start] "pedigree pedigree pedigree" auto [row3-end]
          [row4-start] "footer footer footer" 40px [row4-end]
          / 2fr 3fr 2fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }

    .grid-person {
      display: grid;
      grid-template: 
          [row1-start] "header header" 20px [row1-end]
          [row2-start] "detail1 detail2" auto [row2-end]
          [row3-start] "footer footer" 40px [row3-end]
          / 3fr 8fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }

    .grid-mating {
      display: grid;
      grid-template: 
          [row1-start] "header header" 60px [row1-end]
          [row2-start] "male female" auto [row2-end]
          [row3-start] "pedigree pedigree" auto [row3-end]
          [row4-start] "footer footer" 40px [row4-end]
          / 1fr 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
    }

    .grid-mating-profile {
      display: grid;
      grid-template: 
          [row1-start] "header header" 60px [row1-end]
          [row2-start] "detail1 detail1" auto [row2-end]
          [row3-start] "detail2 detail3" auto [row3-end]
          / 1fr 1fr;
      grid-gap: 15px 10px;
      gap: 15px 10px;
      margin: 10px;
      align-content: space-between;	
    }
  }

  .grid-detail-header {
    grid-area: header;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
  }
  .grid-detail1 {
    grid-area: detail1;
  }
  .grid-detail2 {
    grid-area: detail2;
  }
  .grid-detail3 {
    grid-area: detail3;
  }
  .grid-detail-male {
    grid-area: male;
  }
  .grid-detail-female {
    grid-area: female;
  }
  .grid-detail-pedigree {
    grid-area: pedigree;
  }
  .grid-detail-footer {
    grid-area: footer;
  }

  .pedigree {
    display: grid;
    /*grid-row-gap: 1px;*/
    min-height: 1vh;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.0);
    grid-template-rows: auto auto;
    align-items: stretch;
  }
  
  .pedigree-gens-15 {grid-template-columns: repeat(15, 1fr);}
  .pedigree-gens-14 {grid-template-columns: repeat(14, 1fr);}
  .pedigree-gens-13 {grid-template-columns: repeat(13, 1fr);}
  .pedigree-gens-12 {grid-template-columns: repeat(12, 1fr);}
  .pedigree-gens-11 {grid-template-columns: repeat(11, 1fr);}
  .pedigree-gens-10 {grid-template-columns: repeat(10, 1fr);}
  .pedigree-gens-9 {grid-template-columns: repeat(9, 1fr);}
  .pedigree-gens-8 {grid-template-columns: repeat(8, 1fr);}
  .pedigree-gens-7 {grid-template-columns: repeat(7, 1fr);}
  .pedigree-gens-6 {grid-template-columns: repeat(6, 1fr);}
  .pedigree-gens-5 {grid-template-columns: repeat(5, 1fr);}
  .pedigree-gens-4 {grid-template-columns: repeat(4, 1fr);}
  .pedigree-gens-3 {grid-template-columns: repeat(3, 1fr);}
  .pedigree-gens-2 {grid-template-columns: repeat(2, 1fr);}
  .pedigree-gens-1 {grid-template-columns: repeat(1, 1fr);}

  .pedigree-sire {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    /*display: grid; This will break things */
  
    border-radius: 1px;
    border-left: 1px solid grey;
	}
  .pedigree-dam {
    grid-column-start: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    /*display: grid;*/
  
    border-radius: 1px;
    border-left: 1px solid grey;
  }
  
  .parent-gens-15 {grid-column-end: span 15;}
  .parent-gens-14 {grid-column-end: span 14;}
  .parent-gens-13 {grid-column-end: span 13;}
  .parent-gens-12 {grid-column-end: span 12;}
  .parent-gens-11 {grid-column-end: span 11;}
  .parent-gens-10 {grid-column-end: span 10;}
  .parent-gens-9 {grid-column-end: span 9;}
  .parent-gens-8 {grid-column-end: span 8;}
  .parent-gens-7 {grid-column-end: span 7;}
  .parent-gens-6 {grid-column-end: span 6;}
  .parent-gens-5 {grid-column-end: span 5;}
  .parent-gens-4 {grid-column-end: span 4;}
  .parent-gens-3 {grid-column-end: span 3;}
  .parent-gens-2 {grid-column-end: span 2;}
  .parent-gens-1 {grid-column-end: span 1;}
}

@supports not (display: grid) {

  @supports (display: flex) {
    .pedigree-container {
      /*height: 200vh;*/
      width: 100%;
    }
    .pedigree {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      /*height: 100%;
      grid-row-gap: 1px;
      min-height: 1vh;*/
      margin: 0;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.0);
      /*align-items: stretch;*/
    }

    /*.pedigree-gens-15 {height: 100%;}
    .pedigree-gens-14 {height: 100%;}
    .pedigree-gens-13 {height: 100%;}
    .pedigree-gens-12 {height: 100%;}
    .pedigree-gens-11 {height: 100%;}*/
    .pedigree-gens-10 {height: 15360vh;}
    .pedigree-gens-9 {height: 7680vh;}
    .pedigree-gens-8 {height: 3840vh;}
    .pedigree-gens-7 {height: 1920vh;}
    .pedigree-gens-6 {height: 960vh;}
    .pedigree-gens-5 {height: 480vh;}
    .pedigree-gens-4 {height: 240vh;}
    .pedigree-gens-3 {height: 120vh;}
    .pedigree-gens-2 {height: 60vh;}
    .pedigree-gens-1 {height: 30vh;}


    .pedigree-profile {
      display: flex;
      flex-direction: column;
      flex-basis: 100%;
      flex-grow: 2;
      /*height: 100%;*/
    }

    .break-column {
      flex-basis: 100%;
      width: 0;
    }

    .pedigree-sire,
    .pedigree-dam {
      flex-basis: 50%; 
      /*height: 50%;*/
      flex-grow: 1;
      border-radius: 3px;  
    }

    .pedigree-sire {
      border-left: 5px solid solid grey;
    }
    .pedigree-dam {
      border-left: 5px solid solid grey;
    }
    
    
    .parent-gens-15 {width: 94%; }
    .parent-gens-14 {width: 93%; }
    .parent-gens-13 {width: 93%; }
    .parent-gens-12 {width: 92%; }
    .parent-gens-11 {width: 92%; }
    .parent-gens-10 {width: 91%; }
    .parent-gens-9 {width: 90%; }
    .parent-gens-8 {width: 89%; }
    .parent-gens-7 {width: 88%; }
    .parent-gens-6 {width: 86%; }
    .parent-gens-5 {width: 83%; }
    .parent-gens-4 {width: 80%; }
    .parent-gens-3 {width: 75%; }
    .parent-gens-2 {width: 66%; }
    .parent-gens-1 {width: 50%; }

    .pedigree-gens-15 .pedigree-profile {width: 7%;}
    .pedigree-gens-14 .pedigree-profile {width: 7%;}
    .pedigree-gens-13 .pedigree-profile {width: 8%;}
    .pedigree-gens-12 .pedigree-profile {width: 8%;}
    .pedigree-gens-11 .pedigree-profile {width: 9%;}
    .pedigree-gens-10 .pedigree-profile {width: 10%;}
    .pedigree-gens-9 .pedigree-profile {width: 11%;}
    .pedigree-gens-8 .pedigree-profile {width: 12%;}
    .pedigree-gens-7 .pedigree-profile {width: 14%;}
    .pedigree-gens-6 .pedigree-profile {width: 17%;}
    .pedigree-gens-5 .pedigree-profile {width: 20%;}
    .pedigree-gens-4 .pedigree-profile {width: 25%;}
    .pedigree-gens-3 .pedigree-profile {width: 34%;}
    .pedigree-gens-2 .pedigree-profile {width: 50%;}
    .pedigree-gens-1 .pedigree-profile {width: 100%;}

    /*.grid-detail-header, .grid-detail1, .grid-detail2,
    .grid-detail3, .grid-detail-pedigree, .grid-detail-footer {
      margin: 1rem;
    }*/

    .grid-details,
    .grid-person,
    .grid-mating, 
    .grid-mating-profile {
      display: flex;
      width: 100%;
    }
    .grid-detail-header {
      display: flex;
      flex-basis: 100%;
      justify-content: center;
      align-content: center;
      text-align: center;
    }

    @media screen and (max-width: 599px) {
      .grid-details { flex-flow: column nowrap; }
      .grid-details .grid-detail1 { order: 3; }
      .grid-details .grid-detail2 { order: 2; }
      .grid-details .grid-detail3 { order: 4; }
      .grid-details .grid-detail-pedigree { order: 5; }
      .grid-details .grid-detail-footer { order: 6; }

      .grid-mating { flex-flow: column nowrap; }
      .grid-mating-profile { flex-flow: column nowrap; }
      .grid-mating .grid-detail-male,
      .grid-mating .grid-detail-female { margin: 0 !important; flex-basis: 50%; }
      .grid-mating .grid-detail-pedigree,
      .grid-mating .grid-detail-footer { flex-basis: 100%; }

      .grid-person { flex-flow: column nowrap; }
  
      .card-body { padding: .25rem; }
      .container-fluid { padding-left: .25rem; padding-right: .25rem; }
      .pedigree-profile-words { font-size: .7rem; }
      .pedigree-profile-title { font-size: .65rem; font-weight: 700; }
	  .pedigree-profile-hunting { font-size: .65rem; font-weight: 700; }
      .pedigree-profile-landofbirth img { height: .5rem; }
    }

    @media screen and (min-width: 600px)  and (max-width: 767px) {
      .grid-details { flex-flow: row wrap; }
      .grid-details .grid-detail1 { order: 3; flex-basis: 50%; }
      .grid-details .grid-detail2 { order: 2; flex-basis: 100%; }
      .grid-details .grid-detail3 { order: 4; flex-basis: 50%; }
      .grid-details .grid-detail-pedigree { order: 5; flex-basis: 100%; }
      .grid-details .grid-detail-footer { order: 6; flex-basis: 100%; }

      .grid-person { flex-flow: column nowrap; }

      .grid-mating { flex-flow: row wrap; }
      .grid-mating-profile { flex-flow: column nowrap; }
      .grid-mating .grid-detail-male,
      .grid-mating .grid-detail-female { margin: 0 !important; flex-basis: 50%; }
      .grid-mating .grid-detail-pedigree,
      .grid-mating .grid-detail-footer { flex-basis: 100%; }
    }

    @media screen and (min-width: 768px) and (max-width: 1199px) {
      .grid-details { flex-flow: row wrap; }
      .grid-details .grid-detail1 { order: 2; flex-basis: 29%; }
      .grid-details .grid-detail2 { order: 3; flex-basis: 42%; }
      .grid-details .grid-detail3 { order: 4; flex-basis: 29%; }
      .grid-details .grid-detail-pedigree { order: 5; flex-basis: 100%; }
      .grid-details .grid-detail-footer { order: 6; flex-basis: 100%; }

      .grid-person { flex-flow: column nowrap; }

      .grid-mating { flex-flow: row wrap; }
      .grid-mating-profile { flex-flow: column nowrap; }
      .grid-mating .grid-detail-male,
      .grid-mating .grid-detail-female { margin: 0 !important; flex-basis: 50%; }
      .grid-mating .grid-detail-pedigree,
      .grid-mating .grid-detail-footer { flex-basis: 100%; }
    }

    @media screen and (min-width: 1200px) {
      .grid-details { flex-flow: row wrap; }
      .grid-details .grid-detail1 { order: 2; flex-basis: 29%; }
      .grid-details .grid-detail2 { order: 3; flex-basis: 42%; }
      .grid-details .grid-detail3 { order: 4; flex-basis: 29%; }
      .grid-details .grid-detail-pedigree { order: 5; flex-basis: 100%; }
      .grid-details .grid-detail-footer { order: 6; flex-basis: 100%; }

      .grid-person { flex-flow: row wrap; }
      .grid-person .grid-detail1 { order: 2; flex-basis: 30%; margin: 0 !important; }
      .grid-person .grid-detail2 { order: 3; flex-basis: 70%; margin: 0 !important; }
      .grid-details .grid-detail-footer { order: 4; flex-basis: 100%; }

      .grid-mating, .grid-mating-profile { flex-flow: row wrap; }
      .grid-mating .grid-detail-male,
      .grid-mating .grid-detail-female { flex-basis: 50%; margin: 0 !important; }
      .grid-mating .grid-detail-pedigree,
      .grid-mating .grid-detail-footer { flex-basis: 100%; }
      .grid-mating-profile .grid-detail1 { order: 2; flex-basis: 100%; margin: 0 !important; }
      .grid-mating-profile .grid-detail2 { order: 3; flex-basis: 50%; margin: 0 !important; }
      .grid-mating-profile .grid-detail3 { order: 4; flex-basis: 50%; margin: 0 !important; }
    }
  }

  @supports not (display: flex) {
    /* Fallback for Flexbox: Not yet */
  }
}


#pane-offspring .gradienttable {
  width: 97%;
}
#pane-vertical .gradienttable td, 
#pane-reverse .gradienttable td {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,2f2f46+100&0+0,0.45+100 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(47,47,70,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
text-align: center;
padding: 2px 0 2px 0;
text-shadow: #fff 0 0 10px;
}

/* EDIT DOG FORM */
/* EDIT PERSON FORM */

.nav-edit-dog,
.nav-edit-person {
  display: flex;
  background: #fff;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  position: sticky;
  width: 100%;
  top: 50px;
  z-index: 900;
  padding: 5px;
}

.nav-edit-dog .btn,
.nav-edit-person .btn {
  margin: 0 5px 0 5px;
}

.grid-person fieldset {
  margin-bottom: 20px;
}
.page-footer {
  display: flex;
  flex-direction:  row;
  justify-content:center;
  align-items: stretch;
  padding: 10px;
}

#messages.alert{
  display: none;
  position: fixed !important;
  z-index: 2000;
  right: .5rem;
  top: .5rem;
}


.grid-detail-male,
.grid-detail-female  {
  position: relative;
}

.growing-search .input input {
	transition: width 200ms;
  width: 75px;
  height: 35px;
  padding: 7px 12px;
}

.growing-search .input input:focus {
	width: 200px;
}

.growing-search .input input:hover {
	cursor: pointer;
}

.growing-search .input input:focus {
	outline: none;
}

.flag-icon {
  display: inline;
}

.log ul.changeList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.log ul.changeList li.changeItem {

}

.log .changeName {
  /*font-size: 1.2rem;*/
  font-weight: 700;
}

.log .changeOld {
  color: darkred;
}

.log .changeNew {
  color: darkgreen;
}

.log a[aria-expanded="true"] {
  color: var(--main-color);
  background: none;
}

.log ul ul a {
  background: none;
}

.log img {
  max-height:46px;
}


.queue-buttons {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.blinking {
  -webkit-animation: 1s blink ease infinite;
  -moz-animation: 1s blink ease infinite;
  -ms-animation: 1s blink ease infinite;
  -o-animation: 1s blink ease infinite;
  animation: 1s blink ease infinite;
  z-index: 2;
  position: absolute;
}

@keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-ms-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-o-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}