.card {
    margin-bottom: 5px;
}

.sidebar {
    overflow: auto;
}
    /* Typeahead */

    .blazored-typeahead {
    border: 1px solid #bfbfbf !important;
}

.spellDisplayContainer {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;

    .prepared {
        flex: 0 0 auto;

        .input-group-text {
            height: 38px;
            border-radius: 5px 0px 0px 5px;
            border-right: none;
        }
    }

    .inputElement {
        flex: 1 0 auto;

        .blazored-typeahead
        {
            height: 38px;
            border-radius: unset;
            input {
                height: 36px;
            }

            .blazored-typeahead__input-mask {
                padding: 5px 0.5rem;
            }

            .blazored-typeahead__clear {
                width: 36px;
                height: 36px;
            }
        }
    }

    .info {
        flex: 0 0 auto;
        background-color: white;
        border: 1px solid #bfbfbf;
        border-left: unset;
        width: 15px;
        border-radius: 0px 5px 5px 0px;
        max-width: 15px;
        padding: 0px;

        &:hover {
            background-color: blue;
            border-color: darkblue;
        }
    }
}


/* global Shift / Alt */
.ctrl {
    .send:hover
    {
        background-color: pink !important;
        border-color: red !important;
    }
}

.shift {
    .send:hover
    {
        background-color: lightgreen !important;
        border-color: green !important;
    }
}


/* Modal */
.blazored-modal {
    max-width: 80%;
}


.blazored-modal-fullscreen {
    position: relative;
    margin: auto !important;
    margin-top: 20px !important;

    .blazored-modal-header {
        position: absolute;
        right: 35px;
        z-index: 10;

        .blazored-modal-title {
            display: none;
        }
    }
}


/* Diceroller */
.diceRoller {    
    grid-template-columns: 1fr;
    display: grid;
    * {
        margin: 0;
        padding: 0;
        vertical-align: baseline;
    }

    .dice {
        align-items: center;
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
        grid-template-rows: auto;
        justify-items: center;
        padding: 2rem;
        perspective: 600px;
    }

    .die-list {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        height: 6rem;
        list-style-type: none;
        transform-style: preserve-3d;
        width: 6rem;
    }

    .even-roll {
        transition: transform 1.5s ease-out;
    }

    .odd-roll {
        transition: transform 1.25s ease-out;
    }

    .die-item {
        background-color: #fefefe;
        box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3), inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
        display: grid;
        grid-column: 1;
        grid-row: 1;
        grid-template-areas: "one two three" "four five six" "seven eight nine";
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        height: 100px;
        padding: 1rem;
        width: 100px;
    }

    .dot {
        align-self: center;
        background-color: #676767;
        border-radius: 50%;
        box-shadow: inset -0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.5);
        display: block;
        height: 1.25rem;
        justify-self: center;
        width: 1.25rem;
    }

    .even-roll[data-roll="1"] {
        transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
    }

    .even-roll[data-roll="2"] {
        transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
    }

    .even-roll[data-roll="3"] {
        transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
    }

    .even-roll[data-roll="4"] {
        transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
    }

    .even-roll[data-roll="5"] {
        transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
    }

    .even-roll[data-roll="6"] {
        transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
    }

    .odd-roll[data-roll="1"] {
        transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
    }

    .odd-roll[data-roll="2"] {
        transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
    }

    .odd-roll[data-roll="3"] {
        transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
    }

    .odd-roll[data-roll="4"] {
        transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
    }

    .odd-roll[data-roll="5"] {
        transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
    }

    .odd-roll[data-roll="6"] {
        transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
    }

    [data-side="1"] {
        transform: rotate3d(0, 0, 0, 90deg) translateZ(100px / 2);
    }

    [data-side="2"] {
        transform: rotate3d(-1, 0, 0, 90deg) translateZ(100px / 2);
    }

    [data-side="3"] {
        transform: rotate3d(0, 1, 0, 90deg) translateZ(100px / 2);
    }

    [data-side="4"] {
        transform: rotate3d(0, -1, 0, 90deg) translateZ(100px / 2);
    }

    [data-side="5"] {
        transform: rotate3d(1, 0, 0, 90deg) translateZ(100px / 2);
    }

    [data-side="6"] {
        transform: rotate3d(1, 0, 0, 180deg) translateZ(100px / 2);
    }

    [data-side="1"] .dot:nth-of-type(1) {
        grid-area: five;
    }

    [data-side="2"] .dot:nth-of-type(1) {
        grid-area: one;
    }

    [data-side="2"] .dot:nth-of-type(2) {
        grid-area: nine;
    }

    [data-side="3"] .dot:nth-of-type(1) {
        grid-area: one;
    }

    [data-side="3"] .dot:nth-of-type(2) {
        grid-area: five;
    }

    [data-side="3"] .dot:nth-of-type(3) {
        grid-area: nine;
    }

    [data-side="4"] .dot:nth-of-type(1) {
        grid-area: one;
    }

    [data-side="4"] .dot:nth-of-type(2) {
        grid-area: three;
    }

    [data-side="4"] .dot:nth-of-type(3) {
        grid-area: seven;
    }

    [data-side="4"] .dot:nth-of-type(4) {
        grid-area: nine;
    }

    [data-side="5"] .dot:nth-of-type(1) {
        grid-area: one;
    }

    [data-side="5"] .dot:nth-of-type(2) {
        grid-area: three;
    }

    [data-side="5"] .dot:nth-of-type(3) {
        grid-area: five;
    }

    [data-side="5"] .dot:nth-of-type(4) {
        grid-area: seven;
    }

    [data-side="5"] .dot:nth-of-type(5) {
        grid-area: nine;
    }

    [data-side="6"] .dot:nth-of-type(1) {
        grid-area: one;
    }

    [data-side="6"] .dot:nth-of-type(2) {
        grid-area: three;
    }

    [data-side="6"] .dot:nth-of-type(3) {
        grid-area: four;
    }

    [data-side="6"] .dot:nth-of-type(4) {
        grid-area: six;
    }

    [data-side="6"] .dot:nth-of-type(5) {
        grid-area: seven;
    }

    [data-side="6"] .dot:nth-of-type(6) {
        grid-area: nine;
    }

    @media (min-width: 900px) {
        .dice {
            perspective: 1300px;
        }
    }
}

/* Drag And Drop */
/* Source: https://raw.githubusercontent.com/Postlagerkarte/blazor-dragdrop/master/Plk.Blazor.DragDrop.Demo/wwwroot/css/dragdrop.css */

/*add this to avoid flickering*/
.plk-dd-inprogess > * {
    pointer-events: none;
}

/*dropzone style style*/
.plk-dd-dropzone {
    min-height: 50px;
}

/*drag drop styles*/

.plk-dd-spacing {
    height: 10px;
}

.plk-dd-spacing-dragged-over {
    padding: 25px;
}

.plk-dd-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

    .plk-dd-dragged-over > div {
        background-color: lightgray;
        opacity: 0.6;
        animation: blinker 1s linear infinite;
    }

.plk-dd-dragged-over-denied {
    background-color: red;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

.plk-dd-in-transit {
    opacity: 0;
}

    .plk-dd-in-transit > div {
        opacity: 0;
    }

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink_me {
    animation: blinker 1s linear infinite;
}

/*for flex demo*/

.plk-flex .plk-dd-spacing {
    width: 20px;
    height: auto;
}

.plk-flex .plk-dd-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

    .plk-flex .plk-dd-dragged-over > div {
        background-color: lightgray;
        opacity: 0.9;
        animation: blinker 1s linear infinite;
    }

.plk-flex .plk-dd-in-transit {
    background-color: orangered;
}

    .plk-flex .plk-dd-in-transit > div {
        background-color: orangered;
    }

.plk-dd-noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* Mew rotating SVG styles (moved from index.html) */
.mew-rotating {
    display: block;
    margin: 0 auto 12px auto; /* center and add spacing below */
    width: 30vw; /* responsive size */
    max-width: 150px; /* cap maximum width */
    height: auto; /* keep aspect ratio */
    animation: mew-spin 2s linear infinite;
}

/* Ensure loader text appears below and centered */
.loaderContainer,
#loaderContainer {
    text-align: center;
}

.loaderContainer .text,
#loaderContainer .text {
    display: block;
    text-align: center;
    margin-top: 4px;
    font-size: 1rem;
    color: inherit;
}

/* Overlay element for mew: independent of loader container so page background stays visible */
.mew-overlay {
    position: fixed;
    top: calc(50% + 75px);
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
    background: transparent; /* keep transparent so background image remains visible */
    pointer-events: none; /* allow interactions to pass through if desired */
}

.mew-overlay .text {
    margin-top: 8px;
    font-size: 1.25rem;
}

@keyframes mew-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* End of moved styles */