/*Import other css files*/
@charset "utf-8";

body {
    font-family: arial, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #F7F7F7;
}

input {
    font-family: arial, Arial, Helvetica, sans-serif;
    font-size: 12px
}

#gentab {
    height: 300px
}

#matchtab {
    height: 800px
}

#dot1,
#dot2,
#dot3,
#dot4,
#dot5,
#dot6,
#dot1comp,
#dot2comp,
#dot3comp,
#dot4comp,
#dot5comp,
#dot6comp {
    position: absolute;
    left: 0
}

#tmap,
#compwrap {
    left: 0;
    position: relative
}

a,
link {
    color: #1b3282
}

#mc_embed_signup form {
    padding: 0 !important
}

.skip-to-main-content-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    background-color: black;
    color: white;
    opacity: 0;
}

.skip-to-main-content-link:focus {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}

.starting-field {
    background: #6578FC;
    color: white;
}

.position-relative {
    position: relative;
}

/* CSS talk bubble */

.talk-bubble {
    position: absolute;
    width: 150px;
    height: auto;
    background-color: #000;
    /*color: white;*/
    top: 10px;
    left: 15px;
    color: #fff;
    animation: 3s ease 0s normal forwards 1 fadein;
}

.talk-bubble {
    --b: 3em;
    /* tail dimension */

    --p: 100%;
    /* main position (0%:left 100%:right) */
    --r: 1.2em;
    /* the radius */

    padding: 1em;
    border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b)/4) min(var(--r), var(--p) - var(--b)/4)/var(--r);
    background: #000;
    /* the main color */
}

.talk-text {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: #6578FC;
}

.talk-bubble:before {
    content: "";
    position: absolute;
    top: 100%;
    left: clamp(0%, var(--p) - var(--b)/4, 100% - var(--b)/2);
    width: var(--b);
    aspect-ratio: 1;
    background: inherit;
    --g: #000 calc(100% - 1px), #0000;
    -webkit-mask: radial-gradient(circle closest-side at 88% 88%, var(--g)), radial-gradient(20% 20% at 48% 55%, var(--g)), radial-gradient(25% 25% at 25% 0, var(--g));
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 100%;
    }

    to {
        opacity: 0%;
    }
}

/*table formatting*/

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

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

.vertical-align-middle {
    vertical-align: middle;
}

.vertical-align-top {
    vertical-align: top;
}

.padding-1 {
    padding: 1px;
}

.padding-0 {
    padding: 0px;
}

.border-1 {
    border: 1px solid #000;
}

.border-0 {
    border: 0px;
}

/*font headers*/
.h2 {
    font-size: 1.5em;
    font-weight: bold;
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}

.h3 {
    font-size: 1.17em;
    font-weight: bold;
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}

.bolder {
    font-weight: bolder;
}

.inline {
    display: inline-block;
}