#wp-admin-bar-flag_newsletter_post.flagged {
    background-color: #00b9eb;
}
.slots-container .controls {
	padding: 5px 0;
}

.slots-container .grids-container-controls {
	text-align: right;
	overflow: hidden;
}

.slots-container .grids-container-controls .grid-control {
	display: inline-block;
	margin-left: 15px;
}

.slots-container .trash {
	background-color: rgb(200,200,200);
	height: 95px;
	text-align: center;
	font-weight: bold;
	font-color: rgb(100,100,100);
}

.slots-container .trash.hide {
	visibility: hidden;
}

.slots-container > div {
	width: 45%;
	height: 325px;
}

.slots-container .grid {
	overflow: scroll;
	position: relative;
	z-index: 1;
	max-height: 325px;
}

.slots-container .grid * {
	box-sizing: border-box;
}

.slots-container .grid>.row {
	height: 95px;
}

.slots-container .grid>.row>.slot {
	background-color: rgb(225, 225, 225);
	width: 100%;
	height: 95px;
	float: left;
	border: 1px solid white;
}

.slots-container .grid>.row>.slot.assigned {
	background-color: red;
}

.slots-container .grid>.row>.slot.locked {
	background-color: grey;
}

.slots-container .grid>.row>.slot.hover-valid {
	background-color: green;
}

.slots-container .grid>.row>.slot.hover-invalid {
	background-color: red;
}

.slots-container .grid .module {
	z-index: 2;
	background: transparent;
	background-color: rgb(150, 150, 150);
	overflow: hidden;
}

.slots-container .grid .module:hover {
	background-color: rgb(200, 200, 200);
	cursor: move;
}

.slots-container .grid .module .module-label {
	font-weight: bold;
	color: white;
	position: absolute;
	top: 50%;
	left: 40%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	width: 70%;
	height: 80%;
	text-shadow: 1px 1px black;
}

.slots-container .grid .module .module-label img {
	position: absolute;
	z-index: -1;
	max-width: calc(50%);
}

.slots-container .grid .module .edit-module, .edit-module {
	font-weight: bold;
	color: white;
	font-size: 2em;
	position: relative;
	top: 15px;
	left: 75%;
}

.edit-module.dashicons {
    padding-right: 25px;
}

.slots-container .grid .module .other {
	position: absolute;
	right: calc(10%);
	bottom: calc(25%);
}

.slots-container .grid .module.hovering {
	transform:translateX(-9999px);
}

.slots-container .grid .module {
	position: relative;
}

.slots-container .grid .module.size-1x1 {
	width: calc(100%);
	height: 95px;
}

.slots-container .grid .module.size-1x2 {
	width: calc(25%);
	height: calc(100%);
}

.slots-container .grid .module.size-2x1 {
	width: calc(50%);
	height: 50%;
}

.slots-container .grid .module.size-2x2 {
	width: calc(50%);
	height: calc(100%);
}

.slots-container .grid .module.size-3x1 {
	width: calc(75%);
	height: 50%;
}

.slots-container .grid .module.size-3x2 {
	width: calc(75%);
	height: calc(100%);
}

.slots-container .grid .module.size-4x1 {
	width: calc(100%);
	height: 50%;
}

.slots-container .grid .module.size-4x2 {
	width: calc(100%);
	height: calc(100%);
}

.slots-container .grid .modules {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.slots-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
	height: 800px;
}

.slots-container > div:nth-child(1) {
    order: 1;
    flex: 0 1 40%;
    align-self: auto;
}

.slots-container > div:nth-child(2) {
    order: 2;
    flex: 0 1 40%;
    align-self: auto;
}

.slots-container > div:nth-child(3) {
    order: 3;
    flex: 0 1 100%;
    align-self: auto;
}

.slots-container > div:nth-child(3) .grid {
	max-height: 700px;
}

.row .dropzone {
	border: 4px dashed #b4b9be;
}