$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px
) !default;
$gt-small-width: map-get($grid-breakpoints, sm) !default;

.gt-column-settings {
	position: relative;

	.gt-overlay {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: #fff;
		position: absolute;
		top: 0;
		opacity: 0.5;
		z-index: 3;
	}
}

.gt-column-settings-panel {
	position: absolute;
	width: 100%;

	.gt-column-settings-header {
		position: relative;
		z-index: 4;
		overflow: auto;
	}

	.gt-column-settings-item-wrapper {
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-start;
		align-content: flex-start;
		position: relative;
		z-index: 4;
		width: 100%;
		min-height: 90px;
		overflow-x: auto;
	}
}

.gt-column-settings-item span {
	cursor: move;
}
.gt-column-settings-item:hover span {
	cursor: pointer;
}

.gt-column-settings-item {
	flex: 0 0 auto;
}

.gu-mirror {
	position: fixed !important;
	margin: 0 !important;
	z-index: 9999 !important;
	opacity: 0.8;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
	filter: alpha(opacity=80);
}
.gu-hide {
	display: none !important;
}
.gu-unselectable {
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}
.gu-transit {
	opacity: 0.2;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
	filter: alpha(opacity=20);
}

// get break point for small devices from bootstrap
@media (max-width: $gt-small-width) {
	/*.gt-column-settings-panel {
    width: 100vw !important;
    height: 100vh !important;
    margin-top: 0 !important;
    position: fixed !important;
    top: 0;
    left: 0;
  }*/

	.gt-column-settings-item-wrapper {
		flex-wrap: nowrap !important;
		overflow: auto;
		min-height: 100px;
	}
}