html {
  font-family: sans-serif;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background: url("bg.jpeg") center center no-repeat;
  background-size: cover;
  overflow: hidden;
}

.d-none {
  display: none;
}

.cursor-pointer {
  cursor: pointer;
}

#FamilyChart {
  -webkit-backdrop-filter: blur(3px) contrast(0.6);
  backdrop-filter: blur(3px) contrast(0.6);
  height: 100%;
}

svg.main_svg {
  width: 100%;
  height: 100%;
  color: rgb(59, 85, 96);
}

svg.main_svg text {
  fill: currentColor;
}

rect.card-female, .card-female .card-body-rect, .card-female .text-overflow-mask {
  fill: lightpink;
}

rect.card-male, .card-male .card-body-rect, .card-male .text-overflow-mask {
  fill: lightblue;
}

rect.card-female, .card-female .card-body-rect, .card-female .text-overflow-mask {
  fill: lightpink;
}

rect.card-memory, .card-memory .card-body-rect, .card-memory .text-overflow-mask {
  fill: #d4af37;
}

.card-genderless .card-body-rect, .card-genderless .text-overflow-mask {
  fill: lightgray;
}

.card_add .card-body-rect {
  fill: rgb(59, 85, 96);
  stroke-width: 4px;
  stroke: #fff;
  cursor: pointer;
}

g.card_add text {
  fill: #fff;
}

.card-main {
  stroke: #000;
}


/* card_family_tree element */
.card_family_tree rect {
  transition: .3s;
}
.card_family_tree:hover rect {
  transform: scale(1.1);
}

/* card_family_tree element */
.card_add_relative {
  cursor: pointer;
  color: #fff;
  transition: .3s;
}
.card_add_relative circle {
  fill: rgba(0,0,0,0);
}
.card_add_relative:hover {
  color: black;
}

/* card_family_tree element */
.card_preview {
  cursor: pointer;
}
.card_preview .eye_preview {
  
  fill: #fff;
  transition: .3s;
}
.card_preview:hover .eye_preview {
  fill: black;
}

/* card_family_tree element */
.memory_preview {
  cursor: pointer;
}
.memory_preview .memory_icon_preview {
  
  fill: #fff;
  transition: .3s;
}
.memory_preview:hover .memory_icon_preview {
  fill: black;
}


/* pencil_icon element */
.card_edit.pencil_icon {
  color: #fff;
  transition: .3s;
}
.card_edit.pencil_icon:hover {
  color: black;
}

/* link element */
.card_break_link, .link_upper, .link_lower, .link_particles {
  transform-origin: 50% 50%;
  transition: 1s;
}
.card_break_link {
  color: #fff;
}
.card_break_link.closed .link_upper {
  transform: translate(-140.5px,655.6px);
}
.card_break_link.closed .link_upper g {
  transform: rotate(-58deg);
}
.card_break_link.closed .link_lower {
}
.card_break_link.closed .link_particles {
  transform: scale(0);
}

/* create-tree styles */
.input-field input {
  height: 2.5rem!important;
}
.input-field>label:not(.label-icon).active {
  -webkit-transform: translateY(-8px) scale(0.8);
  transform: translateY(-8px) scale(0.8);
}

.empty {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 100%;
}

.empty-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  height: 100vh;
  width: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.62) 60%, transparent);
  aspect-ratio: 2/1;
  border-radius: 12px;
}
.title {
  font-size: 40px !important;
  margin-top: 0;
  font-weight: 500;
}
@media (max-width: 767px) {
    .title {
        font-size: 32px !important;
        line-height: 42px;
        text-align: center;
    }
}
.subtitle {
  font-size: 1.5rem;
  margin-top: 0;
  font-weight: 50!important;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

.modal {
  background: #434243;
  border-radius: 10px;
  color: white;
}
.modal .modal-content {
  background: #434243;
  border-radius: 10px;
  color: white;
}

.modal .modal-footer {
    background: #434243;
    border-radius: 0 0 10px 10px;
}

.male-radio {
  background: lightblue;
  color: darkblue;
  border:2px solid lightblue;
  border-radius: 5px;
  padding: 10px;
}

.female-radio {
  background: lightpink;
  border:2px solid lightpink;
  color: darkred;
  border-radius: 5px;
  padding: 10px;
}

.center-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

input {
    color: white;
}

.select-wrapper * { transition: none !important; transform: none !important; }