.os-categories-ordering-w {
	margin-bottom: 30px;
	.gu-transit {
	  pointer-events: none;
	}
	.os-category-parent-w .os-category-children {
		padding: 10px;
		border: 1px dotted rgba(0,0,0,0.15);
		border-radius: $border-radius-sm;
		margin: 10px 20px 10px 20px;
		.gu-transit {
		  pointer-events: none;
		  .os-category-w {
		  	margin-bottom: 10px;
		  }
			.os-category-children {
			}
		}
	}
	.os-category-parent-w:first-child {
	}
	.os-category-parent-w:last-child {
		> .os-category-children {
			margin-bottom: 0px;
		}
	}
}
.os-category-parent-w.gu-mirror {
	.os-category-children {
		padding-left: 20px;
	}
	.os-category-w {
		margin-bottom: 10px;
	}
}

.os-category-w.os-new-category-form-w {

}
.os-categories-ordering-w .os-category-w, .os-category-parent-w.gu-mirror .os-category-w{
	@include white-box();
	border-radius: $border-radius-lg;
	& + .os-category-w {
		margin-top: 10px;
	}
	.os-category-head {
		display: flex;
		align-items: center;
		padding: 15px;
		.os-category-drag {
			// display: none;
			font-size: 16px;
			padding: 5px;
			color: $brand-primary;
			margin-right: 5px;
			line-height: 1;
	    cursor: -moz-grab;
	    cursor: -webkit-grab;
	    cursor: grab;
		  &:before {
		    @include latepointfont_admin("\e92b");
		  }
		}
		.os-category-edit-btn {
			background-color: transparent;
			margin-left: auto;
			display: block;
			border: none;
			box-shadow: none;
			padding: 0px;
			text-decoration: none;
			color: $link-color;
			outline: none;
			box-shadow: none;
			cursor: pointer;
			font-size: 16px;
			line-height: 1;
		}
		.os-category-items-meta {
			margin-right: auto;
			margin-left: 20px;
			background-color: #f3f4fd;
			padding: 2px 5px;
			line-height: 1.1;
			font-size: $font-size-base * 0.8;
			color: $color-faded;
			border-radius: $border-radius;
		}
		.os-category-items-count {
			margin-right: auto;
			margin-left: 10px;
			margin-right: 20px;
			background-color: #f3f4fd;
			padding: 2px 5px;
			line-height: 1.1;
			font-size: $font-size-base * 0.8;
			color: $color-faded;
			border-radius: $border-radius;
			a {
				color: $brand-primary;
				border-bottom: 1px solid $brand-primary;
				display: inline-block;
				text-decoration: none;
			}
		}
		.os-category-name {
			font-size: $body-font-size-m;
			font-weight: $body-font-weight-bold;
			padding: 4px;
			flex: 1;
			cursor: pointer;
		}
		.os-category-message {
			margin-right: auto;
			display: block;
			text-decoration: none;
			font-size: $font-size-base * 0.8;
			margin-right: 40px;
			line-height: 1.1;
			font-weight: $body-font-weight-bold;
			padding: 2px 0px;
			color: #cc0303;
			border-bottom: 1px solid #cc0303;
		}
	}
	.os-category-body {
		border-top: 1px solid $border-color-lightest;
		padding: 20px;
		display: none;
		.os-form-buttons {
			padding-top: 10px;
		}
	}
	.os-form-w {
		margin: 0px;
	}

	&.editing {
		.os-category-edit-btn {
			.latepoint-icon:before {
				content: "\e94b";
			}
		}
		.os-category-body {
			display: block;
		}
	}
}
.gu-transit.os-category-parent-w {
	opacity: 0.5;
	> .os-category-w {
		box-shadow: inset 0px 0px 0px 2px $brand-primary;
	}
}
.gu-mirror.os-category-parent-w {
	margin-bottom: 10px;
}


.item-in-category-w {
  background: rgb(240, 241, 247);
  border: 2px solid rgb(219, 220, 236);
	border-radius: $border-radius-sm;
	padding: 6px 8px;
	display: flex;
	align-items: center;
	& + .item-in-category-w {
		margin-top: 10px;
	}
	& + .os-category-parent-w {
		margin-top: 10px;
	}

	&.status-disabled {
		opacity: 0.6;
		border-color: #da6f6f;
		background-color: #ffe8e8;
		.os-category-item-meta {
			background-color: #d60606;
			color: #fff;
		}
	}


	.os-category-item-drag {
		font-size: 14px;
		padding: 5px;
		color: $brand-primary;
		margin-right: 5px;
		line-height: 1;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
	  &:before {
	    @include latepointfont_admin("\e92b");
	  }
	}
	.os-category-item-meta {
		margin-right: auto;
		margin-left: 20px;
		background-color: #e4e5f3;
		padding: 2px 5px;
		line-height: 1.1;
		font-size: $font-size-base * 0.8;
		color: $color-faded;
		border-radius: $border-radius;
	}
	.os-category-item-name {
		font-size: $font-size-base * 0.9;
		font-weight: $body-font-weight-bold;
		flex: 1;
	}
}