.page-header {
    height: 400px;
    padding-top: 100px;
    margin-bottom: 30px;
}
.container-flash {
    margin-top: 5px;
}

.ts-dropdown,
.ts-control,
.ts-control input {
    color: var(--bs-body-color) !important;
}

.text-male {
    --bs-text-opacity: 1;
    /* 5BCEFA 91, 206, 250 */
    color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
}

.text-female {
    --bs-text-opacity: 1;
    /* F5A9B8 245, 169, 184 */
    color: rgba(231, 84, 129, var(--bs-text-opacity))!important;
}

.text-transgender {
    --bs-text-opacity: 1;
    color: #ae6dd3 !important;
}

.variant-card-ms {
    margin-left: 0 !important;
}

@media (min-width: 768px) {
    .variant-card-ms {
        margin-left: -3.5rem !important;
    }
}

.variant-card-mt {
    margin-top: -1.1rem !important;
}

@media (min-width: 768px) {
    .variant-card-mt {
        margin-top: 1rem !important;
    }
}

.location-card-ms {
    margin-left: 0 !important;
}

@media (min-width: 768px) {
    .location-card-ms {
        margin-left: -2.5rem !important;
    }
}

.location-card-mt {
    margin-top: -1.1rem !important;
}

@media (min-width: 768px) {
    .location-card-mt {
        margin-top: 0.5rem !important;
    }
}

.deck-code {

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

}