.menu-list .active-link,
.menu-list .router-link-active {
    color: #fff;
    background-color: #00b3e6;
}

.not-found i {
    font-size: 20px;
    margin-right: 8px;
}

.not-found .title {
    letter-spacing: 0;
    font-weight: 400;
    font-size: 24px;
    text-transform: none;
}

header {
    font-weight: 700;
    font-family: Arial;
}

    header span {
        letter-spacing: 0;
    }

        header span.brand-first {
            color: #fff;
        }

        header span.brand-second {
            color: #ccc;
        }

        header span.brand-third {
            color: #61dafb;
        }

    header .navbar-item.nav-home {
        border: 3px solid transparent;
        border-radius: 0;
    }

        header .navbar-item.nav-home:hover {
            border-right: 3px solid #61dafb;
            border-left: 3px solid #61dafb;
        }

    header .fab {
        font-size: 24px;
    }

        header .fab.js-logo {
            color: #61dafb;
        }

    header .buttons i.fab {
        color: #fff;
        margin-left: 20px;
        margin-right: 10px;
    }

        header .buttons i.fab:hover {
            color: #61dafb;
        }

.edit-detail .input[readonly] {
    background-color: #fafafa;
}

.edit-detail .input::-webkit-input-placeholder {
    color: #ccc;
    font-style: italic;
}

.edit-detail .input::-ms-input-placeholder {
    color: #ccc;
    font-style: italic;
}

.edit-detail .input::placeholder {
    color: #ccc;
    font-style: italic;
}

.content-title-group {
    margin-bottom: 16px;
}

    .content-title-group h2 {
        border-left: 16px solid #00b3e6;
        border-bottom: 2px solid #00b3e6;
        padding-left: 8px;
        padding-right: 16px;
        display: inline-block;
        text-transform: uppercase;
        color: #555;
        letter-spacing: 0;
    }

        .content-title-group h2:hover {
            color: #00b3e6;
        }

    .content-title-group button.button {
        border: 0;
        color: #999;
    }

        .content-title-group button.button:hover {
            color: #00b3e6;
        }

ul.list {
    box-shadow: none;
}

div.card-content {
    background-color: #fafafa;
}

    div.card-content .name {
        font-size: 28px;
        color: #000;
    }

    div.card-content .description {
        font-size: 20px;
        color: #999;
    }

.card {
    margin-bottom: 2em;
}

label.label {
    font-weight: 400;
}

p.card-header-title {
    background-color: #00b3e6;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    display: block;
    padding-left: 24px;
}

.card-footer button {
    font-size: 16px;
    color: #888;
}

    .card-footer button i {
        margin-right: 10px;
    }

    .card-footer button:hover {
        color: #00b3e6;
    }

.modal-card-foot button {
    display: inline-block;
    width: 80px;
}

.modal-card-body,
.modal-card-head {
    text-align: center;
}

.field {
    margin-bottom: 0.75rem;
}

.navbar-burger {
    margin-left: auto;
}

button.link {
    background: none;
    border: none;
    cursor: pointer;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.desktop {
    display: none;
}

.single {
    display: flex;
    justify-content: center;
}

.m-1rem {
    margin: 1rem;
}

@media only screen and (min-width: 768px) {
    .grid-3-col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .single {
        display: none !important;
    }
}
.diceIcon {
        width: 2rem;
        margin: 0;
/*       z-index: 2;*/
    }

    .diceIconSub {
        width: 1.8rem !important;
        margin: 0;
    }

    .card-container {
        display: flex;
        max-height: 840px;
        max-width: 600px;
        min-height: 420px;
        min-width: 300px;
    }

    .card-flip {
        display: grid;
        justify-items: center;
        grid-template: 1fr / 1fr;
        grid-template-areas: "frontAndBack";
        transform-style: preserve-3d;
        transition: all 0.7s ease;
    }

    .front {
        grid-area: frontAndBack;
    }

    .back {
        grid-area: frontAndBack;
        transform: rotateY(-180deg);
    }

    .Trait-1 {
        grid-area: Trait-1;
    }

    .Trait-2 {
        grid-area: Trait-2;
    }

    .Trait-3 {
        grid-area: Trait-3;
    }

    .Trait-4 {
        grid-area: Trait-4;
    }

    .Trait-5 {
        grid-area: Trait-5;
    }

    .Trait-4 {
        grid-area: 6 / 2 / 7 / 6;
    }

    .Trait-5 {
        grid-area: 7 / 2 / 8 / 6;
    }

    .Trait-1, .Trait-2, .Trait-3, .Trait-4, .Trait-5 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas:
            "Trait-Header"
            "Trait-Footer";
    }

    .Rating-Bar {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(35px, auto);
        justify-self: center;
        align-self: center;
    }

    .LeftIcon {
        justify-self: right;
        align-self: center;
        grid-area: LeftIcon;
        height: 1.8em;
    }

    .RightIcon {
        justify-self: start;
        align-self: center;
        grid-area: RightIcon;
        height: 1.8em;
    }

.distinctionCard, .sceneCard {
    max-height: 420px;
    max-width: 300px;
    padding: 0px;
    margin: 0px;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 0.1em 0em;
    border: 2px solid black;
    border-radius: 5%;
}
    .sceneCard {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(8, minmax(0, 1fr));
        gap: 0.1em 0em;
        align-items: baseline;
        grid-auto-flow: row;
        grid-template-areas:
            "LeftIcon PokerCardTitle PokerCardTitle PokerCardTitle PokerCardTitle ."
            ". PoolRating PoolRating PoolRating PoolRating ."
            ". Trait-1 Trait-1 Trait-1 Trait-1-Rating ."
            ". Trait-2 Trait-2 Trait-2 Trait-2-Rating ."
            ". Trait-3 Trait-3 Trait-3 Trait-3-Rating ."
            ". Trait-4 Trait-4 Trait-4 Trait-4-Rating ."
            ". Trait-5 Trait-5 Trait-5 Trait-5-Rating ."
            ". . . . . RightIcon";
    }


.distinctionCard {
    display: grid;
    align-items: baseline;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 5fr 1fr 6fr 1fr;
    grid-template-areas:
        "NameDistinction NameDistinction NameDistinction"
        "Adjective Adjective ."
        ". . ."
        ". Noun Noun"
        "SFX . ."
        "StresSlider StresSlider StresSlider";
    font-size: .8rem;
}

.NameDistinction {
    grid-area: 1 / 1 / 2 / 2;
    font-size: 28px;
    color: #000;
    grid-area: NameDistinction;
    justify-self: start;
    align-self: start;
    text-anchor: middle;
    text-align: center;
    font-weight: bolder;
    font-size: 1.3REM;
    font-family: "Palatino Linotype", Trebuchet MS, Verdana, sans-serif;
    text-align-last: center;
    color: black;
    margin-left: 1rem;
    height: 100%%;
    display: grid;
    grid-auto-flow: row;
}

.Adjective {
    grid-area: 2 / 1 / 3 / 2;
    height: 100%;
    display: grid;
    grid-auto-flow: row;
    margin-left: .2rem;
    white-space: pre;
}

.Noun {
    grid-area: 4 / 3 / 5 / 4;
    height: 100%;
    display: grid;
    align-items: baseline;
    grid-auto-flow: row;
    white-space: pre;
    justify-items: end;
    margin-right: .2REM;
}

.SFX {
    grid-area: 5 / 1 / 6 / 4;
    height: 100%;
    display: grid;
    align-items: baseline;
    grid-auto-flow: row;
    margin: .2rem;
}

.StressSlider {
    grid-area: 6 / 1 / 7 / 4;
    height: 100%;
    display: flex;
    justify-content: center;
}

.DistinctionImage {
    grid-area: 2 / 1 / 5 / 4;
    height: 100%
}

    .paleWoodGradient {
        background: #eacda3; /* fallback for old browsers */
        background: linear-gradient(to bottom, #eacda3, #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }


    .Top-Edge {
        /*    grid-area: 1 / 2 / 2 / 6;*/
        letter-spacing: 0.4em;
        padding-left: 1em;
        text-decoration: underline;
        align-self: end;
    }

    .LeftEdge {
        margin-left: 0.5em;
        justify-self: start;
        align-self: end;
        display: grid;
        grid-auto-flow: row;
        grid-auto-rows: min-content;
        row-gap: 1px;
        grid-area: 2 / 1 / 8 / 2;
        width: 50%;
        height: 100%;
        writing-mode: vertical-rl;
        text-align: right;
        transform: rotate(180deg);
        letter-spacing: 0.4em;
        text-decoration: underline;
    }

    .RightEdge {
        justify-self: end;
        align-self: end;
        margin-right: 0.5em;
        grid-area: 2 / 6 / 8 / 7;
        width: 50%;
        display: grid;
        grid-auto-flow: row;
        grid-auto-rows: min-content;
        row-gap: 1px;
        writing-mode: vertical-rl;
        text-align: right;
        transform: rotate(180deg);
        letter-spacing: 0.4em;
        text-decoration: overline;
    }

    .BottomEdge {
        justify-self: end;
        align-self: end;
        grid-area: 8 / 2 / 9 / 6;
        text-decoration: overline;
        letter-spacing: 0.4em;
        padding-right: 1em;
    }

    .im-flipped {
        transform: rotateY(180deg);
    }

.sceneCardBack {
    max-height: 420px;
    max-width: 300px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    display: grid;
    gap: 0.2em 0em;
    grid-auto-flow: row;
    border: 2px solid black;
    border-radius: 5%;
    justify-self: center;
    align-self: center;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.SceneTitle {
    display: grid;
    align-self: start;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
        "Top-Edge"
        "Title-Bar"
        "Rating-Bar";
    grid-area: 1 / 2 / 3 / 6;
    height: -moz-available; /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
}

    .Title-Bar {
        justify-self: center;
        grid-area: Title-Bar;
    }

    .Rating-Bar {
        justify-self: center;
        align-self: center;
        grid-area: Rating-Bar;
    }

    .Trait-Header {
        grid-area: Trait-Header;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        justify-self: start;
        align-self: start;
        font-size: .9rem;
        font-weight: bold;
    }

    .Trait-Footer {
        grid-area: Trait-Footer;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        justify-self: end;
        align-self: center;
        font-style: italic;
        font-size: .85rem;
        width: 95%;
    }


    .tarotCardTitle {
        text-anchor: middle;
        text-align: center;
        font-style: italic;
        font-weight: bolder;
        font-size: 1.3REM;
        font-family: "Palatino Linotype", Trebuchet MS, Verdana, sans-serif;
        text-align-last: center;
        color: black;
    }

    .p-1 {
        padding: 0.25rem !important;
    }

    .clickThrough {
        pointer-events: none;
    }

    @supports (-moz-appearance:none) {
        .clickThrough {
            z-index: -1; /*for supporting flipping in Firefox*/
        }
    }

    .large {
        width: 4rem;
    }

    .advancedDice {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 2fr 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "stepUp advancedDiceIcon stepDown"
            "removeDice setDice addDice";
        width: fit-content;
    }

    .stepUp {
        justify-self: end;
        align-self: end;
        grid-area: stepUp;
    }

    .stepDown {
        justify-self: start;
        align-self: end;
        grid-area: stepDown;
    }

    .advancedDiceIcon {
        grid-area: advancedDiceIcon;
        grid-area: advancedDiceIcon;
        width: 4rem;
        justify-self: center;
        align-self: end;
    }

    .setDice {
        grid-area: setDice;
        justify-self: center;
        font-size: .8rem;
    }

    .addDice {
        justify-self: start;
        grid-area: addDice;
    }

    .removeDice {
        justify-self: end;
        grid-area: removeDice;
    }

    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
    }

    .tooltip-top {
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
    }

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

    .diceLabel {
        position: fixed;
        font-size: .9rem;
        max-width: 4rem;
        white-space: nowrap;
    }

    .left {
        right: 2rem;
    }

    .right {
        left: 2rem;
    }

    .top {
        bottom: 2rem;
    }

    .bottom {
        top: 2rem;
    }

    .haloWrapper {
        width: 100%;
        height: 15rem;
        position: relative;
    }

    .GMCCard {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 1fr repeat(2, 2fr);
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "gmcTitle gmcTitle gmcTitle"
            "GMCAvatar GMCAvatar GMCAvatar"
            "Talents Talents Talents";
    }

    .gmcTitle {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: .75fr 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "Name Name Name"
            "Distinctions Distinctions Distinctions";
        grid-area: gmcTitle;
    }

.GMCCard, .gmcCardBack {
    max-height: 570px;
    max-width: 330px;
    padding: 0px;
    margin: 0px;
    min-width: 330px;
    min-height: 570px;
    display: grid;
    gap: 0.2em 0em;
    border: 2px solid black;
    border-radius: 5%;
}

.gmcCardBack {
    gap: 0.2em 0em;
    grid-auto-flow: row;
    border: 2px solid black;
    justify-self: center;
    align-self: center;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

    .Name {
        grid-area: Name;
        justify-self: center;
        align-self: center;
        text-anchor: middle;
        text-align: center;
        font-weight: bolder;
        font-size: 1.3REM;
        font-family: "Palatino Linotype", Trebuchet MS, Verdana, sans-serif;
        text-align-last: center;
        color: black;
    }


    .Distinctions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
        grid-area: Distinctions;
        grid-template-areas:
            "Distinction-1" 
            "Distinction-2"
            "Distinction-3";
        justify-self: center;
        align-self: center;
    }

    .Talents {
        grid-area: Talents;
        padding: 1rem;
    }

    .GMCAvatar {
        grid-area: GMCAvatar;
    }

    .distinction, .distinctionLabel {
        font-size: .9rem;
        font-weight: bold;
        max-width: 8rem;
    }

    .distinctionLabel {
        position: relative;
        right: 0rem;
        display: block;
        text-decoration-line: underline;
    }

    .Distinction-1, .Distinction-2, .Distinction-3 {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        width: 100%;
    }

    .Distinction-1 {
        grid-area: Distinction-1;
    }

    .Distinction-2 {
        grid-area: Distinction-2;
    }

    .Distinction-3 {
        grid-area: Distinction-3;
    }

div.rotate {
    width: 333px;
    height: 333px;
    background-color: chocolate;
    box-sizing: border-box;
}

.squareCard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    font-size: .8rem;
    font-weight: bold;
    /*rounded corners with medium solid border*/    
    border-radius: 5%;

    border:solid;
    font-family: "Josefin Sans", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
}

.squareTop {
    grid-area: 1 / 1 / span 1 / span 3;
    transform: rotate(180deg);
}

.squareBottom {
    grid-area: 3 / 1 / span 1 / span 3;
}

.squareLeft {
    grid-area: 1 / 1 / span 3 / span 1;
    /*transform: rotate(90deg) translateX(-100%);
    transform-origin: bottom left;*/
    writing-mode: vertical-rl;
    text-orientation: sideways;
}

.squareRight {
    grid-area: 1 / 3 / span 3 / span 1;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: sideways;
}


div.overlap {
    /*overlap items in fan*/
    display: flex;
    width: 500px;
}

div.paddedSideText {
    -webkit-print-color-adjust: exact;
    padding: 5% 5%;
}

.simplecharacter {
    display: grid;
    width: 444px;
    height: 555px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
}

.agent {
    grid-area: 1 / 1 / 4 / 4;
    z-index: 4;
}

.engine {
    grid-area: 2 / 1 / 5 / 4;
    z-index: 3;
}

.anchor {
    grid-area: 3 / 2 / 6 / 5;
    z-index: 1;
}

.conflict {
    grid-area: 2 / 2 / 5 / 5;
    z-index: 2;
}