.ReactModal__Overlay {
    z-index: 2;
}

.add_to_mood {
	position : absolute;
	top : -15px;
	right : 0;
	display : inline-block;
	background : #c41230;
	padding : 10px 13px;
	border-radius : 50%;
	color: #fff;
}

.mb-notice {
	display: none;
	background-color: #c41230;
	padding: 10px 20px;
	position: fixed;
	bottom: 10px;
	left: 10px;
	color: #fff;
	border-radius: 5px;
}

.mb-top-bar {
	background: #f7f7f7;
	padding: 10px;
	position: relative;
}

.mb-items {
	display: inline-block;
	width: 85%;
	padding: 10px;
	overflow-x: scroll;
	white-space: nowrap;
}

.mb-item {
	display: inline-block;
	position: relative;
	height: 120px;
	width: 120px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin-right: 20px;
}

/*.mb-item img {
	width: 120px;
	margin-right: 20px;
}*/

.mb-item a, .delete-mb-item {
	display: none;
	position: absolute;
	top: -10px;
	right: -10px;
}

.delete-mb-item {
	right: 0;
	top: 0;
}

.mb-item a:hover, .delete-mb-item:hover {
	text-decoration: none;
}

.mb-item:hover a, .rect-items:hover .delete-mb-item {
	display: inline-block;
}

.mb-container {
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
}

.mb-create {
	text-align: center;
}

.mb-create img {
	width: 120px;
	display: block;
}

.mb-create .moodboard.selected {
	border : 3px solid #168dd2;
}

.mb-create .moodboard {
	display: inline-block;
	margin-right: 5px;
}

.react-rect {
	background: rgba( 255, 255, 255, 0.10);
	border : none !important;
}

.rect-items {
	border : 2px dotted rgba( 0, 0, 0, 0.10 );
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	display: flex;
  	flex-direction: column; 
}

.rect-items textarea {
	background: transparent;
	box-sizing: border-box; /* fit parent width */
  height: 100%;
	font-family: 'Caveat', cursive;
	font-size: 1.5em;
	color: #1c8ad3;
}

.rect-items textarea:focus {
	color: #1c8ad3;
}

.mb-edit div {
	margin-right: 10px;
    display: inline-block;
    border : 2px dotted rgba( 0, 0, 0, 0.10 );
    padding : 10px;
    cursor: pointer;
}

.mb-edit {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mb-select {
	background : #fff;
	position: absolute;
	top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin : 0;
     
    background: #eff0f1;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px 0px #ccc;
}

.mb-select img {
	margin-right: 10px;
}

.mb-select img:hover {
	border : 5px solid #fff;
	cursor: pointer;
}

.mb-select h5 {
	padding: 10px;
	background: #fff;
	margin-bottom: 5px;
}

.mb-select h5:after {
	content: ''; 
	position: absolute; 
	top: 0; 
	left: 50%; 
	width: 0; 
	height: 0; 
	border: 11px solid transparent; 
	border-bottom-color: #fff; 
	border-top: 0; 
	margin-left: -11px; 
	margin-top: -11px;
}

.mb-select div {
	width: 280px;
    height: 250px;
    overflow-y: scroll;
    padding: 10px;
}

.mb-add_new {
	position: absolute;
	right: 10px;
	width : 13%;
	top: 40px;
	bottom: 40px;
	text-align: center;
	cursor: pointer;
	border : 3px dotted #ccc;
	padding-top: 30px;
}

.mb-products {
	height: 82%;
	background-color: #f1f1f1;
	overflow-y: scroll;
	margin-top: 50px;
	padding: 10px;
	margin-left: -20px;
	margin-right: -20px;
}

.mb-product {
	
	width: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 190px;
	margin-bottom: 20px;
	transition: border-bottom 0.5s;
	cursor: pointer;
}

.mb-product:hover, .mb-product.active {
	border-bottom: 5px solid #168dd2;
	transition: border-bottom 0.5s;
}

.mb-send-field {
	margin-bottom: 20px;
}

.mb-send-field input {
	width: 100%;
}

.text-center {
	text-align: center;
}

.mb-start-container {
	display: inline-block;
}

.mb-name-sku {
    position: absolute;
    bottom: 5px;
    padding: 5px;
    font-weight: bold;
    font-size: small;
    right: 5px;
    background-color: #fff;
}

#moodboard-count {
	display: inline-block;
	background: #C41230;
	padding: 0.3px 7px;
	color: #fff;
	font-weight: bold;
}

/* Quick hack for new v4 responsive ultilities */
.hidden-xs-up {
  display: none !important;
}

@media (max-width: 575px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .hidden-lg-down {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hidden-xl-up {
    display: none !important;
  }
}

.hidden-xl-down {
  display: none !important;
}
/* Quick fix ends */

@media (max-width: 767px) {
	.mb-start-container {
		display: block;
		margin-top : 10px;
	}

	.mb-summary {
		text-align: center;
		margin-bottom: 10px;
	}

	.mb-add_new {
		position: relative;
		width: 100%;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		padding: 10px;
	}

	.mb-items {
		width: 99%;
	}
}