#admin-page {
    margin-left: 32px;
}

.modal {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

nav.navbar {
    background-color: rgba(0, 0, 0, .75) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

body {
    background-color: black !important;
    color: white !important;
}

.hpd-item-card:hover {
    background-color: rgba(255, 255, 255, .15) !important;
}

.hpd-item-card:active, .hpd-item-card:focus {
    background-color: rgba(255, 255, 255, .2) !important;
}

.hpd-system {
    transition: opacity 200ms;
}

.hpd-item-card {
    outline-style: solid;
    outline-width: 0;
    transition: background-color 200ms, outline-width 200ms;
}

.hpd-item-card:hover {
    outline-style: solid;
    outline-width: 4px;
}

.hpd-item-card:active {
    outline-style: solid;
    outline-width: 6px;
}

.hpd-system:hover {
    opacity: .9 !important;
}

.hpd-system:active, .hpd-system:focus {
    opacity: .8 !important;
}

.hpd-link:hover {
    background-color: rgba(255, 255, 255, .15) !important;
}

.hpd-link:active, .hpd-link:focus {
    background-color: rgba(255, 255, 255, .2) !important;
}

.list-separator-mobile {
    display: none;
}

@media (max-width: 991px) {
    #hpd-cloudburst > div, #hpd-raindrops > div {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .list-separator-desktop {
        display: none;
    }

    span.list-separator-mobile {
        display: inline;
    }
}

@media (max-width: 768px) {
    #hpd-cloudburst > div, #hpd-raindrops > div {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    #hpd-cloudburst > div, #hpd-raindrops > div {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .hpd-item-card img {
        display: inline-block !important;
        margin-right: 5px !important;
        height: 32px !important;
    }

    #hpd-cloudburst > div, #hpd-raindrops > div {
        grid-gap: 5px !important;
    }

    .hpd-item-card div {
        display: inline-block !important;
    }

    .hpd-item-card div:nth-child(3)::before {
        content: "(";
        padding-left: 5px;
        color: white !important;
    }

    .hpd-item-card div:nth-child(3)::after {
        content: ")";
        color: white !important;
    }
}

.dropdown-menu {
    background-color: #222;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, .1);
}

.dropdown-item:active, .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .2);
}

.dropdown-item {
    color: white !important;
}

.dropdown-icon {
    filter: invert(1);
}

.dropdown-toggle .dropdown-icon {
    opacity: .5;
    transition: 200ms opacity;
}

.dropdown-toggle:hover .dropdown-icon, .dropdown-toggle:active .dropdown-icon, .dropdown-toggle:focus .dropdown-icon {
    opacity: .75;
}

dd {
    margin-left: 20px;
}

#system-info a {
    color: white !important;
}

#system-info a:hover {
    opacity: .75;
}

#system-info a:active, #system-info a:focus {
    opacity: .5;
}

@media (max-width: 991px) {
    #member-card {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .species-name {
        display: none;
    }
}

.member-small-only {
    display: none;
}

@media (max-width: 767px) {
    #member-card {
        grid-template-columns: 1fr !important;
        text-align: left;
    }

    #member-icon-mobile {
        display: inline-block !important;
    }

    #system-info {
        grid-template-columns: 1fr !important;
    }

    #member-icon, #member-icon-outer {
        display: none !important;
    }

    #member-relations {
        grid-template-columns: 1fr !important;
        text-align: left;
    }

    .member-small-separator {
        display: none;
    }

    .member-small-only {
        display: inline-block;
    }
}

#page-content a {
    color: #afd0ff;
}

#page-content .btn-outline-light:hover {
    color: black !important;
}

#page-content a:hover {
    opacity: .75;
}

#page-content a:active, #page-content a:focus {
    opacity: .5;
}

.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    background: #151515;
    box-shadow: 3px 4px 10px #ffffff26;
}

.alert {
    filter: invert(1) hue-rotate(180deg);
}

.member-link {
    color: white !important;
    text-decoration: none !important;
}

.system-action {
    border-radius: 10px;
    color: white !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 200ms;
}

.system-action:hover {
    background: rgba(255, 255, 255, .1);
}

.table-dark {
    --bs-table-bg: #000000;
}

.comparison {
    display: grid;
    grid-template-columns: 3fr 1.5fr 1.5fr 2fr repeat(4, 1fr);
}

.comparison-header {
    border-bottom: 2px solid rgba(255, 255, 255, .25);
    font-weight: bold;
}

.comparison-item {
    padding: 5px 10px;
    text-align: center;
}

.comparison-item-clickable:hover {
    background-color: rgba(255, 255, 255, .1);
}

.comparison-item-clickable:active, .comparison-item-clickable:focus {
    background-color: rgba(255, 255, 255, .25);
}

@media (min-width: 1400px) {
    .comparison-header-l0 {
        display: inline;
    }
    .comparison-header-l1 {
        display: none;
    }
    .comparison-header-l2 {
        display: none;
    }
    .comparison-header-l3 {
        display: none;
    }
    .comparison-header-l4 {
        display: none;
    }
    .comparison-header-l5 {
        display: none;
    }
    .comparison-name-full {
        display: inline;
    }
    .comparison-name-small {
        display: none;
    }
    .comparison-colors {
        display: inline;
    }
    .comparison-relations-count {
        display: none;
    }
    .comparison-relations-full {
        display: inline;
    }
}

@media (max-width: 1399px) {
    .comparison-header-l0 {
        display: none;
    }
    .comparison-header-l1 {
        display: inline;
    }
    .comparison-header-l2 {
        display: none;
    }
    .comparison-header-l3 {
        display: none;
    }
    .comparison-header-l4 {
        display: none;
    }
    .comparison-header-l5 {
        display: none;
    }
    .comparison-name-full {
        display: inline;
    }
    .comparison-name-small {
        display: none;
    }
    .comparison-colors {
        display: inline;
    }
    .comparison-relations-count {
        display: none;
    }
    .comparison-relations-full {
        display: inline;
    }
}

@media (max-width: 1199px) {
    .comparison-header-l0 {
        display: none;
    }
    .comparison-header-l1 {
        display: none;
    }
    .comparison-header-l2 {
        display: initial;
    }
    .comparison-header-l3 {
        display: none;
    }
    .comparison-header-l4 {
        display: none;
    }
    .comparison-header-l5 {
        display: none;
    }
    .comparison-name-full {
        display: none;
    }
    .comparison-name-small {
        display: inline;
    }
    .comparison-colors {
        display: inline;
    }
    .comparison-relations-count {
        display: inline;
    }
    .comparison-relations-full {
        display: none;
    }
}

@media (max-width: 991px) {
    .comparison-header-l0 {
        display: none;
    }
    .comparison-header-l1 {
        display: none;
    }
    .comparison-header-l2 {
        display: none;
    }
    .comparison-header-l3 {
        display: initial;
    }
    .comparison-header-l4 {
        display: none;
    }
    .comparison-header-l5 {
        display: none;
    }
    .comparison-name-full {
        display: none;
    }
    .comparison-name-small {
        display: inline;
    }
    .comparison-colors {
        display: none !important;
    }
    .comparison-relations-count {
        display: inline;
    }
    .comparison-relations-full {
        display: none;
    }
}

@media (max-width: 767px) {
    .comparison-header-l0 {
        display: none;
    }
    .comparison-header-l1 {
        display: none;
    }
    .comparison-header-l2 {
        display: none;
    }
    .comparison-header-l3 {
        display: none;
    }
    .comparison-header-l4 {
        display: initial;
    }
    .comparison-header-l5 {
        display: none;
    }
    .comparison-name-full {
        display: none;
    }
    .comparison-name-small {
        display: none;
    }
    .comparison-colors {
        display: none !important;
    }
    .comparison-relations-count {
        display: inline;
    }
    .comparison-relations-full {
        display: none;
    }
}

@media (max-width: 575px) {
    .comparison-header-l0 {
        display: none;
    }
    .comparison-header-l1 {
        display: none;
    }
    .comparison-header-l2 {
        display: none;
    }
    .comparison-header-l3 {
        display: none;
    }
    .comparison-header-l4 {
        display: none;
    }
    .comparison-header-l5 {
        display: initial;
    }
    .comparison-name-full {
        display: none;
    }
    .comparison-name-small {
        display: none;
    }
    .comparison-colors {
        display: none !important;
    }
    .comparison {
        grid-template-columns: repeat(4, 2fr) repeat(4, 1fr) !important;
    }
    .comparison-relations-count {
        display: inline;
    }
    .comparison-relations-full {
        display: none;
    }
}

.tree-first-separator {
    height: 14px !important;
    top: 0 !important;
}

.tree-l0-separator {
    display: inline-block;
    width: 20px;
    margin-left: 35px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    height: 26px;
    position: relative;
    top: -12px;
}

.tree-l1 .tree-l0-separator {
    border-bottom: none !important;
}

.tree-l1-separator {
    display: inline-block;
    width: 20px;
    margin-left: 35px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    height: 26px;
    position: relative;
    top: -12px;
    left: -10px;
}

.tree-l1 .tree-l0-separator {
    width: 30px;
}

.tree-l1 .tree-inner {
    position: relative;
    left: -10px;
}

.tree-l1 .tree-l0-separator {
    border-bottom: none !important;
}

.tree-l2-separator {
    display: inline-block;
    width: 20px;
    margin-left: 35px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    height: 26px;
    position: relative;
    top: -12px;
    left: -10px;
}

.tree-l2 .tree-l1-separator {
    width: 30px;
}

.tree-l2 .tree-l0-separator {
    width: 30px;
}

.tree-l2 .tree-inner {
    position: relative;
    left: -10px;
}

.tree-inner {
    display: inline-block;
}

.navbar-collapse.collapse.show, .navbar-collapse.collapsing {
    background: black;
    margin: 7px -12px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.rainbow-item:hover {
    opacity: .75;
}

.rainbow-item:active {
    opacity: .5;
}

peh-muted {
    --bs-text-opacity: 1;
    color: #6c757d!important;
}

.dropdown-toggle::after {
    margin-bottom: -3px;
}

.navbar-nav {
    width: 100%;
}

.card {
    background-color: #111 !important;
    border: 1px solid rgba(255, 255, 255, .125) !important;
}

#member-banner-container > #member-banner > #system-info {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

#member-details {
    background: rgba(255, 255, 255, .1);
    border: 1px solid transparent;
    border-top: none;
    padding: 10px 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    text-align: center;
}

.navbar-collapse.show {
    z-index: 99999;
}

@media (max-width: 991px) {
    div#member-details.member-details-loggedIn {
        grid-template-columns: repeat(3, 1fr) !important;
        text-align: center;
    }

    #member-details {
        grid-template-columns: 1fr !important;
        text-align: left;
    }
}

@media (max-width: 767px) {
    div#member-details.member-details-loggedIn {
        grid-template-columns: repeat(2, 1fr) !important;
        text-align: left;
    }
}

.linked-card {
    opacity: 1 !important;
    color: white !important;
    text-decoration: none !important;
}

.linked-card:hover {
    opacity: .75 !important;
}

.linked-card:active {
    opacity: .5 !important;
}

.navbar-brand {
    position: relative;
    z-index: 9999;
}

html, body {
    overflow-x: hidden;
}