.react-grid-layout {
	background: #3d3d3d;
	border: 14px solid black;
	box-sizing: content-box;
	transform-origin: left top;
}

.widget {
	overflow: hidden;
	border: 2px dashed white;

	background: repeating-linear-gradient(
		-55deg,
		#22222200,
		#222 10px,
		#33333300 10px,
		#333 20px
	);
}

.widget--hidden {
  background: black;
	border: none;
}

@keyframes Border {
	0% {
		border-color: crimson;
	}

	20% {
		border-color: orange;
	}

	40% {
		border-color: white;
	}

	80% {
		border-color: cyan;
	}

	100% {
		border-color: purple;
	}
}

.widget--selected {
	border: 2px dashed #83fc83;
	animation: Border 3s infinite alternate;
	-webkit-animation: Border 3s infinite alternate;
}

.dragqueen,
.react-grid-item > .react-resizable-handle{
	z-index: 3;
}


.blurSection {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit
}

.blurSection::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-top-left-radius: 16px;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 60%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 0%,
    black 60%,
    transparent 100%
  );
}