:root {
    --HeaderAllowance: 70px;
    --MenuHeight: 48px;
}


.GridContainer {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--HeaderAllowance) + var(--MenuHeight));
    height: calc(100vh - var(--HeaderAllowance) - var(--MenuHeight));
    padding-top: calc(var(--MenuHeight)/2);
    overflow: scroll;
}

.OverlayLabel {
    margin-left: 1.25px;
    margin-bottom: 1.25px;
    text-align: center;
    font-size: 0.5rem;
    font-style: italic;
    background: transparent;
    background-color: rgba(255,255,255,0.6);
    padding: 1px 1px;
    width: 44%;
    border-radius: 10px;
    pointer-events: none;
}


@media only screen and (max-width: 900px) {
    .MenuContainer {
        display: none;
    }
}

@media only screen and (min-width: 900px) {
    .MenuContainer {
        position: fixed;
        /*background-color: lightblue;
        top: var(--HeaderAllowance);*/
        left: 0;
        right: 0;
        height: var(--MenuHeight);
        z-index: 1;
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-rows: var(--MenuHeight);
        grid-template-columns: repeat(3, auto);
        grid-template-areas: "Slider DragButtons ActionButtons";
    }
}



.MenuContainer.Adding {
    background-color: #2D4D91;
    color: white;
    text-align: center;
}

.MenuContainer.Deleting {
    background-color: darkred;
    color: white;
    text-align: center;
    grid-template-columns: 1fr;
}

.MenuContainer > .Slider {
    grid-area: Slider;
}

    .MenuContainer > .Slider > input {
        width: 100px;
    }

.MenuContainer > .DragButtons {
    grid-area: DragButtons;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    grid-column-gap: 5px;
}

@media only screen and (min-width: 900px) {
    .MenuContainer > .DragButtons > .DragButton > svg {
        height: 24px;
        width: 24px;
    }

    .MenuContainer > .ActionButtons > button {
        height: 24px;
        width: 24px;
    }

        .MenuContainer > .ActionButtons > button > span {
            font-size: 12px;
        }
}

@media only screen and (min-width: 1050px) {
    .MenuContainer > .DragButtons > .DragButton > svg {
        height: 28px;
        width: 28px;
    }

    .MenuContainer > .ActionButtons > button {
        height: 28px;
        width: 28px;
    }

        .MenuContainer > .ActionButtons > button > span {
            font-size: 14px;
        }
}

@media only screen and (min-width: 1350px) {
    .MenuContainer > .DragButtons > .DragButton > svg {
        height: 32px;
        width: 32px;
    }

    .MenuContainer > .ActionButtons > button {
        height: 32px;
        width: 32px;
    }

        .MenuContainer > .ActionButtons > button > span {
            font-size: 16px;
        }
}

@media only screen and (min-width: 1950px) {
    .MenuContainer > .DragButtons > .DragButton > svg {
        height: 36px;
        width: 36px;
    }

    .MenuContainer > .ActionButtons > button {
        height: 36px;
        width: 36px;
    }

        .MenuContainer > .ActionButtons > button > span {
            font-size: 18px;
        }
}


.MenuContainer > .DragButtons > .DragButton {
    cursor: grab;
    color: rgba(0,0,0,.5);
}

    .MenuContainer > .DragButtons > .DragButton:hover {
        cursor: grab;
        color: rgba(0,0,0,1);
    }

    .MenuContainer > .DragButtons > .DragButton.Import {
        color: #2D4D91;
    }



.MenuContainer > .ActionButtons {
    grid-area: ActionButtons;
}

    .MenuContainer > .ActionButtons > button {
        align-items: center;
        margin: 0;
        padding: 0;
    }

.Step {
    height: 100%;
    display: grid;
    grid-template-rows: 2fr 3fr;
    grid-template-areas:
        "Name"
        "Prompt";
    text-align: center;
    align-items: center;
    border-radius: 10px;
    color: black;
    background-color: #82b2da;
    border: 1px solid black;
}

    .Step > .Name, .Step > .Prompt {
        height: 100%;
        align-content: center;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: .85rem;
        padding: .25rem;
    }

    .Step > .Name {
        grid-area: Name;
        white-space: nowrap;
        background-color: rgba(255,255,255,.5);
        border-radius: 8px 8px 0 0;
    }

    .Step > .Prompt {
        grid-area: Prompt;
        font-size: smaller;
    }

    .Step.InActive {
        background-color: lightgray;
        color: black;
    }

    .Step.PreventAction {
        opacity: 0.25;
        pointer-events: none;
        cursor: not-allowed;
    }

.SplitStart {
    background-color: none;
    align-content: center;
    text-align: center;
    background-image: url('../images/Diamond.svg');
    padding: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: .85rem;
}

    .SplitStart.PreventAction {
        opacity: 0.25;
        pointer-events: none;
        cursor: not-allowed;
    }

.Step.Start, .Step.End {
    color: white;
    font-weight: bold;
}

.Step.Start {
    background-color: mediumaquamarine;
}

.Step.End {
    background-color: #2D4D91;
}

.Placeholder {
    background-color: transparent;
    cursor: default;
    background-size: cover;
    background-repeat: no-repeat;
}

    .Placeholder.AllowAdd {
        border: 1px solid #2D4D91;
        border-radius: 10px;
        text-align: center;
        align-content: center;
        cursor: crosshair;
        background-color: rgba(255,255,255, .9);
    }

        .Placeholder.AllowAdd::after {
            content: 'Add';
            font-size: 2rem;
            color: #CA5A1A;
            font-weight: bold;
        }

        .Placeholder.AllowAdd:hover, .Placeholder.AllowDrop:hover {
            transform: scale(1.25);
        }

    .Placeholder.AllowDrop {
        border: 1px solid #2D4D91;
        border-radius: 10px;
        text-align: center;
        align-content: center;
    }

        .Placeholder.AllowDrop::after {
            content: 'Drop';
            font-style: italic;
            z-index: 10;
            font-weight: 400;
            font-size: 2rem;
            color: #7A7875;
        }

    .Placeholder.SplitStart {
        background-image: url('../images/SplitStart.svg');
    }

    .Placeholder.SplitEnd {
        background-image: url('../images/SplitEnd.svg');
    }

    .Placeholder.SplitEndContinue {
        background-image: url('../images/SplitEndContinue.svg');
    }

    .Placeholder.LeftDown {
        background-image: url('../images/LeftDown.svg');
    }

    .Placeholder.LeftDownContinue {
        background-image: url('../images/LeftDownContinue.svg');
    }

    .Placeholder.LeftRightSmall {
        background-image: url('../images/LeftRightSmall.svg');
    }

    .Placeholder.LeftRightLarge {
        background-image: url('../images/LeftRightLarge.svg');
    }

    .Placeholder.RightDown {
        background-image: url('../images/RightDown.svg');
    }

    .Placeholder.RightDownContinue {
        background-image: url('../images/RightDownContinue.svg');
    }

    .Placeholder.DownLeft {
        background-image: url('../images/DownLeft.svg');
    }

    .Placeholder.DownLeftContinue {
        background-image: url('../images/DownLeftContinue.svg');
    }

    .Placeholder.DownRight {
        background-image: url('../images/DownRight.svg');
    }

    .Placeholder.DownRightContinue {
        background-image: url('../images/DownRightContinue.svg');
    }

    .Placeholder.UpDownSmall {
        background-image: url('../images/UpDownSmall.svg');
    }

    .Placeholder.UpDownLarge {
        background-image: url('../images/UpDownLarge.svg');
    }


    .Placeholder.LoopStart {
        background-image: url('../images/LoopStart.svg');
    }

    .Placeholder.LoopEnd {
        background-image: url('../images/LoopEnd.svg');
    }

    .Placeholder.LoopUpDownSmall {
        background-image: url('../images/LoopUpDownSmall.svg');
    }

    .Placeholder.LoopUpDownLarge {
        background-image: url('../images/LoopUpDownLarge.svg');
    }

    .Placeholder.JumpForwardStart {
        background-image: url('../images/JumpForwardStart.svg');
    }

    .Placeholder.JumpForwardLeftEnd {
        background-image: url('../images/JumpForwardLeftEnd.svg');
    }

    .Placeholder.JumpForwardRightEnd {
        background-image: url('../images/JumpForwardRightEnd.svg');
    }

    .Placeholder.JumpBackEnd {
        background-image: url('../images/JumpBackEnd.svg');
    }


    .Placeholder.JumpBackStartLeft {
        background-image: url('../images/JumpBackStartLeft.svg');
    }

    .Placeholder.JumpBackStartRight {
        background-image: url('../images/JumpBackStartRight.svg');
    }

    .Placeholder.JumpDownLeft {
        background-image: url('../images/JumpDownLeft.svg');
    }

    .Placeholder.JumpDownRight {
        background-image: url('../images/JumpDownRight.svg');
    }

    .Placeholder.JumpLeftRightSmall {
        background-image: url('../images/JumpLeftRightSmall.svg');
    }

    .Placeholder.JumpLeftRightLarge {
        background-image: url('../images/JumpLeftRightLarge.svg');
    }

    .Placeholder.JumpUpDownSmall {
        background-image: url('../images/JumpUpDownSmall.svg');
    }

    .Placeholder.JumpUpDownLarge {
        background-image: url('../images/JumpUpDownLarge.svg');
    }

    .Placeholder.JumpEndRight {
        background-image: url('../images/JumpEndRight.svg');
    }

    .Placeholder.JumpEndLeft {
        background-image: url('../images/JumpEndLeft.svg');
    }

    .Placeholder.ParallelSplitEndRequired {
        background-image: url('../images/ParallelSplitEndRequired.svg');
    }

    .Placeholder.ParallelSplitEndOptional {
        background-image: url('../images/ParallelSplitEndOptional.svg');
    }