.grid-viewport {
}

.grid-viewport.grid-dragMode,
.grid-viewport.grid-dragMode .grid-tile {
    cursor: move !important;
}

.grid-edit .grid-viewport {
    overflow: auto !important;
}

.grid-dashboard {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently not supported by any browser */
	box-sizing: content-box;
}

.grid-edit .grid-dashboard {
    width: 5120px !important;
    height: 5120px !important;
    background:
            linear-gradient(#DDDDDD 1.1px, transparent 1.1px),
            linear-gradient(90deg, #DDDDDD 1.1px, transparent 1.1px),
            linear-gradient(#DDDDDD 2px, transparent 2px),
            linear-gradient(90deg, #DDDDDD 2px, transparent 2px) -1px -1px;
	border-style: solid;
	border-width: 20px;
	border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QIJDAYNN/VcMgAAARBJREFUaN7tmssNgzAQRMer9EAPNJaaaIweqILcEB8HsGIpZmb2zmqfbBDztGnu+gGrStP4xs3aP5ur1vqFEuwGWAF2AVaBBYCEgno6bBEwBew0vpMS7K0TZoK9BGaDPQVmhP0KzAqbBWaGPQCzw26AFWAXYBVYAEhKsId4yA47d/0QSrCnJ8waGbPvcO3hatcv871UTtZOy07LTus/sCU97/SL2sO1flNC4Rqv+4US7CUwY7AINacVak4r1JxWqDmtUHNaoea0onXY2vk4Wh7OTstOq7xfKMECGYnHLPCAncSz07LTstN63gdPCtZ7WgIywHta7PnYe1re0yILFt7TYs/H3tNilwF2WnZaZP/aH7tswbxmpE4vAAAAAElFTkSuQmCC);
	border-image-slice: 20;
	border-image-repeat: round;
}


.grid-edit.grid-noInteraction .grid-dashboard {
	pointer-events: none;
}

.grid-minimap {
    display: none;
    position: fixed;
    width: 200px;
    height: 200px;
    top: 180px;
    right: 50px;
    background-color: rgba(120, 120, 120, 0.5);
    z-index: 2;
	border: solid 2px transparent;
	border-radius: 3px;
}

.grid-edit .grid-minimap {
    display: block;
}

.grid-tile {
	box-sizing: border-box;
    position: absolute;
    width: 400px;
    height: 200px;
    z-index: 0;
	cursor: pointer;
}

.grid-tile .grid-tileContent {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    padding: 4px;
}

.grid-tile.grid-capturePointerEvents .grid-tileContent {
	pointer-events: none;
}

.grid-edit .grid-tile .grid-tileContent {
	pointer-events: none !important;
}

.grid-tile .grid-clickPanel {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	pointer-events: none;
	z-index: 1;
}

.grid-tile.grid-useClickPanel.grid-capturePointerEvents .grid-clickPanel,
.grid-edit .grid-tile.grid-useClickPanel .grid-clickPanel {
	pointer-events: auto;
}

.grid-viewport .grid-tile .grid-tileContent > * {
	border: 2px solid transparent;
	border-radius: 3px; // DEFAULT_CORNER_RADIUS;
	overflow: hidden;
}

.grid-viewport:not(.grid-edit) .grid-tile:hover .grid-tileContent > * {
	border-color: #00a1b2; //PRIMARY_COLOR
}

.grid-viewport:not(.grid-edit) .grid-tile.grid-tileEmpty {
	display: none;
}

.grid-edit .grid-tile {
    background-color: rgba(200,200,200, 0.4);
}

.grid-edit .grid-dashboard .grid-moveHandle {
    display: initial;
}

.grid-tile.ui-selecting,
.grid-tile.ui-selected {
    background-color: rgba(42, 182, 244, 0.6);
}

.grid-tile.grid-collision {
	z-index: 1;
	background-color: rgba(220, 23, 42, 0.6);
}

.grid-tile.ui-draggable-dragging,
.grid-tile.ui-resizable-resizing {
    z-index: 1;
    opacity: 0.5;
    margin: 0px;
	border: solid 1px white;
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGZpbGw9IiNiN2I3YjciIGQ9Ik02OC4zMywyMTMuNDU3YzAuMjExLDE5LjI1NSwwLjkyNiw0OS42NTcsMy4xMzUsODMuNzA4YzMuNzU5LDU3LjgxMSwxMS4xNzUsMTA5LjIxOSwxMS4xNzUsMTA5LjIxOQoJCQlsOTYuMjUyLTkxLjYxNGMwLDAtMy41MDItNDUuODI1LDIuMTgyLTExNC4yN0MxODEuMDczLDIwMC41LDc0LjQ5LDE4Ny43NzEsNjguMzMsMjEzLjQ1N3oiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIGZpbGw9IiNiN2I3YjciIGQ9Ik0yOTAuMDY3LDQ0NS4zNDdjMjQuOTM1LTcuMDYzLDE3LjY0Ni0xMTEuNzUzLDE3LjY0Ni0xMTEuNzUzYy02OC42NDIsMi4yOTItMTE0LjI0Ny0zLjQ2NS0xMTQuMjQ3LTMuNDY1CgkJCWwtOTYuMjUyLDkxLjYwOWMwLDAsNTAuOTg2LDkuOTUxLDEwOC41NDUsMTYuNTZjMzIuNDk2LDMuNzI3LDc2LjUzNCw2Ljc3NCw4Mi43MTMsNy4yMDEKCQkJQzI4OC45NzcsNDQ1LjUzLDI4OS43ODMsNDQ1LjQyNSwyOTAuMDY3LDQ0NS4zNDd6Ii8+Cgk8L2c+Cgk8cGF0aCBmaWxsPSIjYjdiN2I3IiBkPSJNNjguMjg0LDIwNy41M2MwLjAwOSwxLjgyOSwwLjAyNywzLjgxMywwLjA0Niw1LjkzMWMxLjEzNy00LjY5MywyLjg5Ni03Ljk2MSw2Ljc5Mi0xMi45MDcKCQljNy45My0xMC4wNDcsMjAuNzE4LTEyLjY2OCwyNS44NDItMTMuMzUyYzI2LjA2Mi0zLjQxLDY0LjUzNS03LjYwOCwxMDMuNDAyLTguODE0YzY4LjY0Mi0yLjExMywxMTQuMDQ2LDMuNTg0LDExNC4wNDYsMy41ODQKCQlsOTYuMjUyLTkxLjYxOWMwLDAtNTAuNTEtOS42MjUtMTA4LjA2LTE2LjM5NWMtMzcuNTkzLTQuNDE0LTcwLjgxMy02Ljc1Ni04OS4zMzEtNy44NDJjLTEuMjM3LTAuMDgzLTE0LjU2Ni0xLjcwNS0yNy4wODgsMTAuMTg1CgkJYy0xMy43NDEsMTMuMDI2LTgyLjYzMSw3OC40MTQtMTEwLjMzMywxMDQuNzE4QzY3LjM0LDE5Mi45MDUsNjguMjc0LDIwNi4yOTcsNjguMjg0LDIwNy41M3oiLz4KCTxwYXRoIGZpbGw9IiNiN2I3YjciIGQ9Ik0yOTUuMTE4LDQ0NS44OTdjLTEuODI0LTAuMTA2LTMuODA0LTAuMjE2LTUuOTIxLTAuMzQ5YzQuNzQ4LTAuODk4LDguMTEyLTIuNDkzLDEzLjIyOC02LjEzNwoJCWMxMC40MzItNy40MjUsMTMuNjg2LTIwLjA2NiwxNC42MTItMjUuMTYzYzQuNjkzLTI1Ljg1NSwxMC43ODktNjQuMDc2LDEzLjkwNS0xMDIuODM4YzUuNTAxLTY4LjQ1NCwyLjA1NC0xMTQuMDg3LDIuMDU0LTExNC4wODcKCQlsOTYuMjQzLTkxLjYxNGMwLDAsNy4xMzIsNTAuOTI3LDExLjA1NiwxMDguNzM4YzIuNTQ4LDM3Ljc3MiwzLjI1NCw3MS4wNzEsMy40MTksODkuNjJjMC4wMDksMS4yMzMsMC45OSwxNC42MzUtMTEuNTA1LDI2LjU0MgoJCWMtMTMuNjk1LDEzLjA4Ni04Mi40LDc4LjY2Ni0xMTAuMDI5LDEwNS4wM0MzMDkuNjk0LDQ0Ny41NTEsMjk2LjM2NSw0NDUuOTYxLDI5NS4xMTgsNDQ1Ljg5N3oiLz4KPC9nPgo8L3N2Zz4K);*/
    /*background-size: 50%;*/
    /*background-repeat: no-repeat;*/
    /*background-position: 50%;*/
}

.grid-tile.ui-draggable-dragging {
    cursor: move;
}

.grid-tile.ui-draggable-dragging .grid-resizeHandler,
.grid-tile.ui-resizable-resizing:not(.grid-tileReference) .grid-resizeHandler {
	display:none;
}

.grid-tile.ui-draggable-dragging .grid-tileContent,
.grid-tile.ui-resizable-resizing .grid-tileContent{
	display: none;
}

.grid-resizeHandler {
	background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iTGF5ZXJfMSIKICAgeD0iMHB4IgogICB5PSIwcHgiCiAgIHdpZHRoPSIzMnB4IgogICBoZWlnaHQ9IjMycHgiCiAgIHZpZXdCb3g9IjAgMCA1MTIgNTEyIgogICBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iSWNvbnNfZmlsZV8wMDNfUmVzaXplLnN2ZyI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMjEiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnMxOSIgLz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE0NzEiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTU4IgogICAgIGlkPSJuYW1lZHZpZXcxNyIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iNy4zNzUiCiAgICAgaW5rc2NhcGU6Y3g9IjE2IgogICAgIGlua3NjYXBlOmN5PSIxNiIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkxheWVyXzEiIC8+PGcKICAgICBpZD0iZzMiCiAgICAgc3R5bGU9ImZpbGw6IzAwYTFiMjtmaWxsLW9wYWNpdHk6MSI+PGNpcmNsZQogICAgICAgZmlsbD0iI2I3YjdiNyIKICAgICAgIGN4PSI0MDIuNDU4IgogICAgICAgY3k9IjQwMi40NTgiCiAgICAgICByPSI0My41NDIiCiAgICAgICBpZD0iY2lyY2xlNSIKICAgICAgIHN0eWxlPSJmaWxsOiMwMGExYjI7ZmlsbC1vcGFjaXR5OjEiIC8+PGNpcmNsZQogICAgICAgZmlsbD0iI2I3YjdiNyIKICAgICAgIGN4PSIyNTYiCiAgICAgICBjeT0iNDAyLjQ1OCIKICAgICAgIHI9IjQzLjU0MiIKICAgICAgIGlkPSJjaXJjbGU3IgogICAgICAgc3R5bGU9ImZpbGw6IzAwYTFiMjtmaWxsLW9wYWNpdHk6MSIgLz48Y2lyY2xlCiAgICAgICBmaWxsPSIjYjdiN2I3IgogICAgICAgY3g9IjEwOS41NDIiCiAgICAgICBjeT0iNDAyLjQ1OCIKICAgICAgIHI9IjQzLjU0MiIKICAgICAgIGlkPSJjaXJjbGU5IgogICAgICAgc3R5bGU9ImZpbGw6IzAwYTFiMjtmaWxsLW9wYWNpdHk6MSIgLz48Y2lyY2xlCiAgICAgICBmaWxsPSIjYjdiN2I3IgogICAgICAgY3g9IjQwMi40NTgiCiAgICAgICBjeT0iMjU2IgogICAgICAgcj0iNDMuNTQyIgogICAgICAgaWQ9ImNpcmNsZTExIgogICAgICAgc3R5bGU9ImZpbGw6IzAwYTFiMjtmaWxsLW9wYWNpdHk6MSIgLz48Y2lyY2xlCiAgICAgICBmaWxsPSIjYjdiN2I3IgogICAgICAgY3g9IjI1NiIKICAgICAgIGN5PSIyNTYiCiAgICAgICByPSI0My41NDIiCiAgICAgICBpZD0iY2lyY2xlMTMiCiAgICAgICBzdHlsZT0iZmlsbDojMDBhMWIyO2ZpbGwtb3BhY2l0eToxIiAvPjxjaXJjbGUKICAgICAgIGZpbGw9IiNiN2I3YjciCiAgICAgICBjeD0iNDAyLjQ1OCIKICAgICAgIGN5PSIxMDkuNTQyIgogICAgICAgcj0iNDMuNTQyIgogICAgICAgaWQ9ImNpcmNsZTE1IgogICAgICAgc3R5bGU9ImZpbGw6IzAwYTFiMjtmaWxsLW9wYWNpdHk6MSIgLz48L2c+PC9zdmc+");
	background-position-x: right;
	background-position-y: bottom;
	background-size: 100%;
	width: 7mm;
	height: 7mm;
	margin: 4px;
}

.ui-selectable-helper {
	border-color: gray;
}

.grid-edit .grid-tile.ui-resizable-resizing::before {
	content: attr(data-msg);
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: black;
	font-weight: bold;
	overflow: hidden;
}

.grid-edit .grid-tile.grid-tileReference.ui-resizable-resizing::after {
	border: solid 7px black;
	border-radius: 7px;
	content: '';
	position: absolute;
	transform: translate(-7px, -7px);
}