table.table-traits {
    text-align: center
}

table.table-traits td {
    width: calc(var(--trait-width) * 2);
    height: calc(var(--trait-width) * 2)
}

.trait-container {
    min-height: 64px;
    position: relative
}

img.trait {
    position: relative;
    width: var(--trait-width);
    height: var(--trait-width);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    clip-path: polygon(
        50% 0%, 
        93% 25%, 
        93% 75%, 
        50% 100%, 
        7% 75%, 
        7% 25%
      );
}

.trait-border {
    width: calc(var(--trait-width) + -12px);
    height: calc(var(--trait-width) + 0px);
    background: #fff;
    margin-left: 35px;
    margin-top: 0;
    position: absolute;
    background: #676c6c;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% calc(100% - 1px), 0 75%, 0 25%)
}

td:has(.trait-container[data-active="1"]) .trait-border {
    width: calc(var(--trait-width) + -4px);
    height: calc(var(--trait-width) + 4px);
    background: #09F25E;
    margin-left: 31px;
    margin-top: -2px
}

td:has(.trait-container[data-active="1"]) img.trait {
    background: #09F25E
}

td:hover .trait-border {
    width: calc(var(--trait-width) + -4px);
    height: calc(var(--trait-width) + 4px);
    background: #09F25E;
    margin-left: 31px;
    margin-top: -2px
}

td:hover img.trait {
    background: #09F25E
}

img.hover {
    width: calc(var(--trait-width) + 3px);
    height: auto;
    position: absolute;
    margin: -6px 0 0 -61px;
    display: none
}

td:hover img.hover {
    display: initial
}

.col-category {
    margin: 0 8px;
    min-width: calc(var(--trait-width) * 6)
}

.line {
    position: absolute;
    z-index: 0
}

.line-top-to-bottom {
    background: #676c6c;
    width: 3px;
    height: calc(var(--trait-width));
    margin-left: calc(var(--trait-width) - 1px);
    position: absolute;
    z-index: 0
}

.line-top-to-bottom-right {
    background: #676c6c;
    width: calc(var(--trait-width) * 2);
    height: 3px;
    margin: 20px 0 0 calc(var(--trait-width) - 1px);
    position: absolute;
    z-index: 0
}

.line-top-to-bottom-right::after {
    content: "";
    background: #676c6c;
    width: 3px;
    height: var(--trait-width);
    margin-left: calc(var(--trait-width) - 1px);
    position: absolute;
    z-index: 0
}

.line-top-to-bottom-left {
    background: #676c6c;
    width: calc(var(--trait-width) * 2);
    height: 3px;
    margin: 20px 0 0 calc((var(--trait-width) + 1px) * -1);
    position: absolute;
    z-index: 0
}

.line-top-to-bottom-left::before {
    content: "";
    background: #676c6c;
    width: 3px;
    height: var(--trait-width);
    margin-left: calc(var(--trait-width) * -1);
    position: absolute;
    z-index: 0
}

.line-top-to-bottom-right::before {
    content: "";
    background: #676c6c;
    width: 3px;
    position: absolute;
    z-index: 0
}

.line-top-to-bottom-left::after {
    content: "";
    background: #676c6c;
    width: 3px;
    position: absolute;
    z-index: 0
}

.line-top-to-bottom-left[data-column-start="0"][data-column-end="2"] {
    margin-left: calc(var(--trait-width) * -3);
    width: calc(var(--trait-width) * 4)
}

.line-top-to-bottom-left[data-column-start="0"][data-column-end="2"]::before {
    margin-left: calc((var(--trait-width) * -2) - 1px)
}

.line-top-to-bottom-left[data-column-start="1"][data-column-end="2"] {
    margin-left: calc(var(--trait-width) * -1);
    width: calc(var(--trait-width) * 2)
}

.line-top-to-bottom-right[data-column-start="1"][data-column-end="0"] {
    margin-left: calc(var(--trait-width));
    width: calc(var(--trait-width) * 2)
}

.line-top-to-bottom-right[data-column-start="2"][data-column-end="0"] {
    margin-left: calc(var(--trait-width) * 1);
    width: calc(var(--trait-width) * 4)
}

.line-top-to-bottom-right[data-column-start="2"][data-column-end="0"]::after {
    margin-left: calc((var(--trait-width) * 2) - 1px)
}

.line-top-to-bottom-right[data-column-start="1"][data-column-end="0"]::before {
    margin-left: calc((var(--trait-width) * -1) - 1px);
    margin-top: -20px;
    height: 22px
}

.line-top-to-bottom-right[data-column-start="2"][data-column-end="1"]::before {
    margin-left: calc((var(--trait-width) * -1));
    margin-top: -20px;
    height: 22px
}

.line-top-to-bottom-right[data-column-start="2"][data-column-end="0"]::before {
    margin-left: calc((var(--trait-width) * -2) - 1px);
    margin-top: -20px;
    height: 22px
}

.line-top-to-bottom-left[data-column-start="0"][data-column-end="2"]::after {
    margin-left: calc((var(--trait-width) * 2) - 1px);
    margin-top: -20px;
    height: 22px
}

.line-top-to-bottom-left[data-column-start="1"][data-column-end="2"]::after {
    margin-left: calc((var(--trait-width) * 1) - 1px);
    margin-top: -20px;
    height: 22px
}

:root {
    --trait-width: 39px
}

.trait-border {
    width: calc(var(--trait-width) * .8);
    height: calc(var(--trait-width) - 2px);
    margin-left: calc(var(--trait-width) * .6);
    margin-top: 2px
}

td:has(.trait-container[data-active="1"]) .trait-border {
    width: calc(var(--trait-width) * .8);
    height: calc(var(--trait-width) - 2px);
    margin-left: calc(var(--trait-width) * .6);
    margin-top: 2px
}

td:hover .trait-border {
    width: calc(var(--trait-width) * .8);
    height: calc(var(--trait-width) - 2px);
    margin-left: calc(var(--trait-width) * .6);
    margin-top: 2px
}

img.hover {
    width: calc(var(--trait-width) * 1.05);
    height: calc(var(--trait-width) * 1.15);
    margin-left: calc(var(--trait-width) * -1);
    margin-top: calc(var(--trait-width) * -.075)
}

.category-container {
    min-width: calc(var(--trait-width) * 18)
}

.table-0-0 .row-5,
.table-5-1 .row-5,
.table-5-2 .row-5,
.table-5-3 .row-5,
.table-6-1 .row-5,
.table-6-2 .row-5 {
    display: none
}

:focus {
    outline: 0;
    box-shadow: none;
    border: none
}

div:where(.swal2-container) div:where(.swal2-validation-message)::before {
    background-color: #19273c;
    border: 1px solid #fff
}

@keyframes bounceIn {
    0% {
        transform: scale(.9) translateY(-5px);
        opacity: 0
    }

    50% {
        transform: scale(1.1) translateY(0);
        opacity: 1
    }

    100% {
        transform: scale(1) translateY(0)
    }
}