html,
body,
app {
    background-color: #e6e6e6ff;
}

app {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.fixed-main {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.tile {
    width: 300px;
}

.on-top {
    z-index: 100;
}

.bottom-right {
    right: 0px;
    bottom: 0px;
    width: auto !important;
}

.plk-dd-inprogess > * {
    pointer-events: none;
}

/*dropzone style style*/
.plk-dd-dropzone {
    min-height: 50px;
    flex-wrap: wrap !important;
    display: flex !important;
}

/*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.5;
}

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

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

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

.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.9;
        animation: blinker 1s linear infinite;
    }

.plk-dd-noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -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 */
}

.mud-tabs {
    height: 100%;
}

    .mud-tabs.mud-tabs-rounded .mud-tabs-panels {
        background: var(--mud-palette-surface);
        height: 100%;
        overflow: auto;
    }

.item-selected {
    background: var(--mud-palette-secondary-lighten);
}

.blocklyModalContent {
    overflow-y: auto;
    height: 500px;
}

.button-on-image {
    display: flex;
    margin-bottom: -48px;
    padding-top: 8px;
    padding-right: 8px;
}

.preview-image {
    width: 250px;
    height: 135px;
    cursor: pointer;
}

    .preview-image:hover {
        box-shadow: var(--mud-elevation-4);
    }

.image-container {
    overflow: scroll;
    max-height: 462px;
    min-height: 152px;
}

.mud-dialog-width-lg {
    max-width: 1414px !important;
}

.table-actions {
    margin-top: -52px;
}

.scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.blocklyDropDownDiv {
    z-index: 1700;
}

.mud-main-content {
    padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
    padding-bottom: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
}

@media(min-width:0) and (orientation:landscape) {
    .mud-main-content {
        padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4);
        padding-bottom: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4);
    }
}

@media(min-width:600px) {
    .mud-main-content {
        padding-top: var(--mud-appbar-height);
        padding-bottom: var(--mud-appbar-height);
    }
}

.mud-table-container {
    flex-grow: 1 !important;
}

.mud-table-pagination {
    overflow: unset !important;
}

.big-dialog {
    height: 75vh !important;
}

.page-content {
    height: calc(100% - 48px);
}