/* column headers */
.x-grid3-header {
	background: $background-color-main;
	border-bottom: 1px solid $grey;
	padding: 0;
}

td.x-grid3-hd-over .x-grid3-hd-inner,
td.sort-desc .x-grid3-hd-inner,
td.sort-asc .x-grid3-hd-inner,
td.x-grid3-hd-menu-open .x-grid3-hd-inner {
	background: $background-color-main;
}

.x-grid3-hd-row {
	td {
		padding: ($grid-header-height - $button-small-height)/2 0;
		border-color: $background-color-main;
		position: relative;

		.x-grid3-hd-inner {
			line-height: $font-default-line-height;
			display: inline-block;
			border: 1px solid $background-color-main;
			border-radius: 2px;
			padding: ($button-small-height - $font-default-line-height - 2px)/2 $padding-medium; /* substract 2px for the borders */
			font-weight: bold;
			overflow: visible; /* needed for the .x-grid3-hd-btn to be visible when we place it outside of the button */
			background: $background-color-main;
			max-width: 100%;
			box-sizing: border-box;

			.zarafa-x-grid3-hd-title {
				overflow: hidden;
				text-overflow: ellipsis;

				.x-grid3-hd-checker {
					width: 15px;
				}
			}

			.x-grid3-hd-btn {
				border: 1px solid $grey;
				border-radius: 2px;
				background-color: $background-color-main;
				width: 16px;
				height: $button-small-height - 2px !important; /* overwriting the inline styled height that extjs gives this element */
				right: -20px;
				top: -1px; /* needed because the parent has a border */
				@extend .icon_cogwheel_s;
      			background-position: sprite-position($iconsmap, icon_cogwheel_s, $offset-y: 6, $offset-x: 3);
			}
		}
	}
	td:hover .x-grid3-hd-inner,
	td:hover .x-grid3-hd-inner .x-grid3-hd-btn{
		border-color: $grey2;
	}
	td:active .x-grid3-hd-inner,
	td:active .x-grid3-hd-inner .x-grid3-hd-btn{
		background-color: $grey3;
	}

	td.sort-desc .x-grid3-hd-inner,
	td.sort-asc .x-grid3-hd-inner {
		padding-right: 9px + 2*$padding-medium; /* some extra padding to place the sort icon */
	}

	td.sort-desc .x-grid3-sort-icon,
	td.sort-asc .x-grid3-sort-icon{
		width: 9px;
		height: 5px;
		position: absolute;
		right: $padding-medium;
		top: (($button-small-height - 5px)/2 - 1px);
	}

	td.sort-desc .x-grid3-sort-icon{
		@extend .arrow_down_l;
      	background-position: sprite-position($iconsmap, arrow_down_l, $offset-y: 0, $offset-x: 0);
	}
	td.sort-asc .x-grid3-sort-icon{
		@extend .arrow_up_l;
      	background-position: sprite-position($iconsmap, arrow_up_l, $offset-y: 0, $offset-x: 0);
	}

	td.sort-desc .x-grid3-hd-inner,
	td.sort-asc .x-grid3-hd-inner,
	td.sort-desc .x-grid3-hd-inner .x-grid3-hd-btn,
	td.sort-asc .x-grid3-hd-inner .x-grid3-hd-btn {
		border-color: $grey;
		background-color: $grey3;
	}
	td.sort-desc:active .x-grid3-hd-inner,
	td.sort-asc:active .x-grid3-hd-inner,
	td.sort-desc:active .x-grid3-hd-inner .x-grid3-hd-btn,
	td.sort-asc:active .x-grid3-hd-inner .x-grid3-hd-btn {
		background-color: $grey4;
	}

	/* Icon only columns */
	td.zarafa-icon-column {
		.x-grid3-hd-inner {
			height: 24px;
			width: 22px;
			padding: 0;
			text-align: center;

			/* reposition the icon headers */
			p {
				position: relative;
				display: inline-block;
				min-width: 12px;

				.title {
					display: none;
				}
			}
		}
	}

	td.zarafa-icon-column.sort-asc,
	td.zarafa-icon-column.sort-desc {
		p {
			display: none;
		}

		.x-grid3-sort-icon {
			margin: 0;
		}
	}



	/****************************************************************************
	 * Icons
	 ****************************************************************************/

	td.zarafa-icon-column .x-grid3-hd-inner{
		p.icon_importance {
			background-position: sprite-position($iconsmap, icon_importance, $offset-y: 5px, $offset-x: 4px);
		}
		p.icon_index {
			background-position: sprite-position($iconsmap, icon_index, $offset-y: 4px, $offset-x: 1px);
		}
		p.icon_attachment {
			@extend .icon_paperclip;
			background-position: sprite-position($icons, icon_paperclip, $offset-y: 2px, $offset-x: -4px);
		}
		p.icon_flag {
			background-position: sprite-position($iconsmap, icon_flag, $offset-y: 5px, $offset-x: 0px);
		}

		/* note icon complete */
		p.icon_complete,
		/* calendar grid */
		p.icon_allday {
			@extend .icon_all_day;
			background-position: sprite-position($iconsmap, icon_all_day, $offset-y: 3px, $offset-x: 0px);
			width: 14px;
		}
		p.icon_recurring {
			@extend .icon_recurrence;
			background-position: sprite-position($icons, icon_recurrence, $offset-y: 3px, $offset-x: 0px);
			width: 14px;
		}
		p.icon_reminder {
			background-position: sprite-position($iconsmap, icon_reminder, $offset-y: 4px, $offset-x: 4px);
			width: 18px;
		}
	}
}

	/****************************************************************************
	 * Icons in the 'Show columns' menu
	 ****************************************************************************/
	.x-menu{
		.x-menu-check-item {
			/* check/uncheck images are 14 px wide */
			padding-left: $padding-small + 14px + $padding-medium;

			.x-menu-item-text {
				p {
					padding-left: 13px;
				}

				/* mail grid */
				p.icon_importance {
					background-position: sprite-position($iconsmap, icon_importance, $offset-y: 4px, $offset-x: 4px);
				}
				p.icon_index {
					background-position: sprite-position($iconsmap, icon_index, $offset-y: 3px, $offset-x: 1px);
				}
				p.icon_attachment {
					@extend .icon_paperclip;
					background-position: sprite-position($icons, icon_paperclip, $offset-y: 1px, $offset-x: -5px);
				}
				p.icon_flag {
					background-position: sprite-position($iconsmap, icon_flag, $offset-y: 4px, $offset-x: 0px);
				}

				/* task icon complete */
				p.icon_complete,
				/* calendar grid */
				p.icon_allday {
					@extend .icon_all_day;
					background-position: sprite-position($iconsmap, icon_all_day, $offset-y: 3px, $offset-x: 0pxpx);
					margin-left: -2px;
					padding-left: 12px;
				}
				p.icon_recurring {
					@extend .icon_recurrence;
					background-position: sprite-position($icons, icon_recurrence, $offset-y: 3px, $offset-x: 0pxpx);
					margin-left: -2px;
					padding-left: 12px;
				}
				p.icon_reminder {
					background-position: sprite-position($iconsmap, icon_reminder, $offset-y: 3px, $offset-x: 0px);
					margin-left: -6px;
					padding-left: 16px;
				}
			}
		}
	}

/******************************************************************************
 * Empty text
 ******************************************************************************/
.k-addressbookmainpanel-grid .emptytext {
	font-size: $font-size-large !important;
	color: $grey6;
	margin-top: 150px;
}

/******************************************************************************
 * Group headers
 ******************************************************************************/
.x-grid-group-hd {
	border: none;
	background: $grey;
	padding: $padding-small $padding-small;

	div.x-grid-group-title {
		color: $font-color-dark;
		background-image : none;
		font-weight: normal;
	}
}

/******************************************************************************
 * Grid columns
 ******************************************************************************/
.x-grid3-row {
	border-top: none;
	border-color: $grey;
	.x-grid3-cell-inner {
		line-height: 100%;
		padding: $padding-large ($padding-medium + 1px);
		position: relative;
	}

	/*
	 * exception for the categories column which has labels that will be truncated when too long
	 * so truncating the cell itself will cause strange behaviour.
	 */
	.x-grid3-cell-inner.x-grid3-col-categories	{
		text-overflow: clip;
	}

	.x-grid3-row-body-tr {
		.zarafa-grid-body-container {
			overflow: hidden;
			word-wrap: break-word;

			.grid_compact {
				line-height: $font-line-height-mail-grid-compact;
				min-height: $font-line-height-mail-grid-compact; /* we need this for when there is no title set */
				max-height: $font-line-height-mail-grid-compact; /* added 1px because letters get cut off at the bottom otherwise */
				padding-bottom: 0px;
				padding-top: $padding-small + 1px;
			}

			.grid_compact_left {
				padding-left: 30px;
			}

			.grid_compact_subject_cell {
				color : $grid-subject-color;
				max-height: 2 * $font-line-height-mail-grid-compact;
				overflow: hidden;
			}
		}
	}

	/* reposition checkboxes (size of checkbox is 15x15) */
	.x-grid3-check-col-td,
	.x-grid3-td-checker {
		background: transparent;

		.x-grid3-cell-inner {
			padding-top: ($font-default-size + 2*$padding-large - 15) / 2 !important; /* important is needed because Ext also added it */
		}
	}
}

.x-grid3-row.x-grid3-row-expanded {
	.x-grid3-cell-inner {
		padding-bottom: $padding-large - 4px;
	}

	.x-grid3-row-body {
		padding-bottom: $padding-large;
	}
}
.x-grid3-row.x-grid3-row-expanded.with-categories {
	.x-grid3-row-body {
		padding-bottom: $padding-large - $padding-small;
	}
}


.x-grid3-row-over {
	background: $grid-hover-color;
	border-color: $grey; /* Ext wants to make the hovered border darker, we don't */
}
.x-grid3-row-selected {
	background: $grid-active-color !important; /* Ext uses important, so we also must do that */
}

.x-grid3-row.x-grid3-row-selected {
	border: 1px solid $grid-active-color;
	border-top: 0px;
}

/* Mail grid */
#mail-grid,
#calendar_grid,
#contact-gridview,
#task-grid,
#note-gridview,
#unread-mail-widget {
	.x-grid3-row {
		border-left-color: white;
	}

	.mail_unread {
		div {
			font-weight: bold;
		}
	}
}

	/*********************************
	 * Icons in the grid colums
	 ********************************/
	.x-panel > .x-panel-bwrap > .x-panel-body > .x-grid3{
		.x-grid3-row {

			/* Icon column */
			.icon_message,
			.icon_mail.icon_message_read {
				@extend .icon_mail_read;
	        	background-position: sprite-position($iconsmap, icon_mail_read, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_mail.icon_message_unread {
				@extend .icon_mail_unread;
	        	background-position: sprite-position($iconsmap, icon_mail_unread, $offset-y: $padding-medium + 5, $offset-x: $padding-medium - 1);
			}
			.icon_mail_replied {
	        	background-position: sprite-position($iconsmap, icon_mail_replied, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_appt_meeting_single {
				@extend .icon_calendar_mr;
	        	background-position: sprite-position($iconsmap, icon_calendar_mr, $offset-y: $padding-medium + 1, $offset-x: $padding-medium - 2);
			}
			.icon_mail_stubbed {
	        	background-position: sprite-position($iconsmap, icon_mail_stubbed, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 1);
			}
			.icon_mail_forwarded {
	        	background-position: sprite-position($iconsmap, icon_mail_forwarded, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_mail_oof {
	        	background-position: sprite-position($iconsmap, icon_mail_oof, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 3);
			}
			.icon_contact_user {
				@extend .icon_contact_card;
	        	background-position: sprite-position($iconsmap, icon_contact_card, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_contact_distlist {
				@extend .icon_distlist;
	        	background-position: sprite-position($iconsmap, icon_distlist, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_contact_equipment {
	        	background-position: sprite-position($iconsmap, icon_contact_equipment, $offset-y: $padding-medium + 4, $offset-x: $padding-medium - 2);
			}
			.icon_contact_gab_user {
				@extend .icon_contact_smtp;
	        	background-position: sprite-position($iconsmap, icon_contact_smtp, $offset-y: $padding-medium + 4, $offset-x: $padding-medium - 2);
			}
			.icon_contact_room {
	        	background-position: sprite-position($iconsmap, icon_contact_room, $offset-y: $padding-medium + 2, $offset-x: $padding-medium + 1);
			}
			.icon_contact_company {
	        	background-position: sprite-position($iconsmap, icon_contact_company, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 3);
			}
			.icon_appt_appointment {
				@extend .icon_calendar_blue;
	        	background-position: sprite-position($iconsmap, icon_calendar_blue, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_appt_meeting_recurring,
			.icon_appt_recurring {
				@extend .icon_calendar_appt_recurring;
	        	background-position: sprite-position($iconsmap, icon_calendar_appt_recurring, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_appt_meeting_single {
				@extend .icon_calendar_mr;
	        	background-position: sprite-position($iconsmap, icon_calendar_mr, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_appt_meeting_accept {
				@extend .icon_calendar_appt_accept;
	        	background-position: sprite-position($iconsmap, icon_calendar_appt_accept, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_appt_meeting_decline {
				@extend .icon_appt_meeting_cancel;
	        	background-position: sprite-position($iconsmap, icon_appt_meeting_cancel, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_appt_meeting_tentative {
				@extend .icon_calendar_appt_tentative;
	        	background-position: sprite-position($iconsmap, icon_calendar_appt_tentative, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_appt_meeting_newtime {
				@extend .icon_calendar_appt_newtime;
	        	background-position: sprite-position($iconsmap, icon_calendar_appt_newtime, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_appt_meeting_cancel {
	        	background-position: sprite-position($iconsmap, icon_appt_meeting_cancel, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}

			.icon_appt_meeting_outofdate {
				@extend .icon_calendar_appt_outofdate;
	        	background-position: sprite-position($iconsmap, icon_calendar_appt_outofdate, $offset-y: $padding-medium + 2, $offset-x: $padding-medium - 2);
			}
			.icon_task_normal,
			.icon_task_recurring {
				@extend .icon_task;
	        	background-position: sprite-position($iconsmap, icon_task, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}

			.icon_task_assignee{
				@extend .icon_task_assigned;
				background-position: sprite-position($iconsmap, icon_task_assigned, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}

			.icon_task_request,
			.icon_task_assigner{
				background-position: sprite-position($iconsmap, icon_task_request, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}

			.icon_task_declined {
				background-position: sprite-position($iconsmap, icon_task_declined, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}

			.icon_task_accepted {
				background-position: sprite-position($iconsmap, icon_task_accepted, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}

			/* notes */
			.icon_note_blue {
				@extend .icon_note_blue;
	        	background-position: sprite-position($iconsmap, icon_note_blue, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}
			.icon_note_yellow {
				@extend .icon_note_yellow;
	        	background-position: sprite-position($iconsmap, icon_note_yellow, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}
			.icon_note_white {
				@extend .icon_note_white;
	        	background-position: sprite-position($iconsmap, icon_note_white, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}
			.icon_note_pink {
				@extend .icon_note_pink;
	        	background-position: sprite-position($iconsmap, icon_note_pink, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}
			.icon_note_green {
				@extend .icon_note_green;
	        	background-position: sprite-position($iconsmap, icon_note_green, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}

			.icon_mail_nondelivery_receipt {
				@extend .icon_mail_report_ndr;
	        	background-position: sprite-position($iconsmap, icon_mail_report_ndr, $offset-y: $padding-medium + 4, $offset-x: $padding-medium - 4);
			}
			.icon_mail_read_receipt {
				@extend .icon_mail_report_accept;
	        	background-position: sprite-position($iconsmap, icon_mail_report_accept, $offset-y: $padding-medium + 4, $offset-x: $padding-medium - 4);
			}
			.icon_mail_nonread_receipt {
				@extend .icon_mail_report_decline;
	        	background-position: sprite-position($iconsmap, icon_mail_report_decline, $offset-y: $padding-medium + 4, $offset-x: $padding-medium - 4);
			}

			/* attachment column */
			.icon_attachment {
				@extend .icon_paperclip;
	        	background-position: sprite-position($icons, icon_paperclip, $offset-y: $padding-medium + 1, $offset-x: $padding-medium - 4);
			}
			.grid_compact.icon_attachment {
	        	background-position: sprite-position($icons, icon_paperclip, $offset-y: 0, $offset-x: $padding-medium - 4);
			}

			/* importance column */
			.icon_importance_urgent {
				@extend .icon_priority_high;
	        	background-position: sprite-position($icons, icon_priority_high, $offset-y: $padding-medium + 4, $offset-x: $padding-medium + 4);
			}
			.icon_importance_nonurgent {
				@extend .icon_priority_low;
	        	background-position: sprite-position($icons, icon_priority_low, $offset-y: $padding-medium + 4, $offset-x: $padding-medium + 1);
			}
			.grid_compact.icon_importance_urgent {
	        	background-position: sprite-position($icons, icon_priority_high, $offset-y: 3, $offset-x: $padding-medium + 4);
			}
			.grid_compact.icon_importance_nonurgent {
	        	background-position: sprite-position($icons, icon_priority_low, $offset-y: 3, $offset-x: $padding-medium + 2);
			}

			/* flags column */
			.icon_flag {
				background-position: sprite-position($iconsmap, icon_flag, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 2);
				visibility: hidden;
			}
			.icon_flag_red {
	        	background-position: sprite-position($iconsmap, icon_flag_red, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}
			.icon_flag_yellow {
	        	background-position: sprite-position($iconsmap, icon_flag_yellow, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}
			.icon_flag_orange {
	        	background-position: sprite-position($iconsmap, icon_flag_orange, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}
			.icon_flag_orange_dark {
	        	background-position: sprite-position($iconsmap, icon_flag_orange_dark, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}
			.icon_flag_complete {
	        	background-position: sprite-position($iconsmap, icon_flag_complete, $offset-y: $padding-medium, $offset-x: $padding-medium - 1);
			}

			.icon_folder_note {
				background-position: sprite-position($iconsmap, folder, $offset-y: $padding-medium + 3, $offset-x: $padding-medium - 1);
			}

			.icon_reminder {
				background-position: sprite-position($iconsmap, icon_reminder, $offset-y: $padding-medium + 3, $offset-x: $padding-medium + 2);
			}
		}

		.x-grid3-row-over .icon_flag {
			visibility: visible;
		}

		.zarafa-grid-empty-cell.icon_flag {
			cursor: pointer;
			margin: 5px;
		}

		.zarafa-grid-empty-cell.icon_flag .x-unselectable {
			padding-top: 0px;
		}
	}

	/* Override ExtJS selected grid */
	.x-grid3-body .x-grid3-row-selected .x-grid3-col.x-grid3-td-checker {
		background-image: none;
	}

	/* Add some left padding for calendar */
	.x-grid3-row .x-grid3-check-col-on {
		background-position: sprite-position($iconsmap, icon_checked, $offset-x: 3, $offset-y: 0);
		background-image: sprite-url($iconsmap) !important;
	}

	.x-grid3-row .x-grid3-check-col {
		background-position: sprite-position($iconsmap, icon_unchecked, $offset-x: 3, $offset-y: 0);
		background-image: sprite-url($iconsmap) !important;
	}

/* Task grid Due tasks row */
.zarafa-task-overdue {
	color: $red1;
}

/* Task grid Completed tasks row */
.zarafa-task-complete {
	color: $grey6;
	.k-task-complete {
		text-decoration: line-through;
	}
}

/******************************************************************************
 * Grid with no column headers
 ******************************************************************************/
.x-grid-panel.k-no-column-headers {
	.x-grid3-header {
		display: none;
	}
}

.x-grid3 .zarafa-grid-button-container {
	position: absolute;
	right: 0;
	top: 0;
	padding: ($font-default-size + 2 * $padding-large - $button-small-height)/2  0 ($font-default-size + 2 * $padding-large - $button-small-height)/2 $padding-small;
	background-color: $background-color-main;
}
.x-grid3 .x-grid3-row-over .zarafa-grid-button-container {
	background-color: $grid-hover-color;
}
.x-grid3 .x-grid3-row-selected .zarafa-grid-button-container {
	background-color: $grid-active-color;
}
.x-grid3 .zarafa-grid-button {
	width: $button-small-height;
	height: $button-small-height;
	float: left;
	margin-left: $padding-small;
	cursor: pointer;
	display: none;
	background-image: sprite-url($iconsmap) !important;
}
.x-grid3 .x-grid3-row-over .zarafa-grid-button {
	display: block;
}
/* Fixed categories cannot be edited or deleted because they are used
   to map old flags to categories */
.x-grid3-row-over .k-category-fixed .k-grid-button-edit,
.x-grid3-row-over .k-category-fixed .k-grid-button-delete {
	display: none;
}

.x-grid3 .k-grid-button-edit {
	background-position: sprite-position($iconsmap, icon_pencil, $offset-x: 3, $offset-y: 3);
}
.x-grid3 .k-grid-button-edit:hover {
	background-position: sprite-position($iconsmap, icon_pencil_dark, $offset-x: 3, $offset-y: 3);
}
.x-grid3 .k-grid-button-delete {
	background-position: sprite-position($iconsmap, icon_trash, $offset-x: 3, $offset-y: 3);
}
.x-grid3 .k-grid-button-delete:hover {
	background-position: sprite-position($iconsmap, icon_trash_dark, $offset-x: 3, $offset-y: 3);
}
.x-grid3 .k-grid-button-pin {
	background-position: sprite-position($iconsmap, icon_pin_outline, $offset-x: 3, $offset-y: 3);
}
.x-grid3 .k-grid-button-pin:hover {
	background-position: sprite-position($iconsmap, icon_pin_outline_dark, $offset-x: 3, $offset-y: 3);
}
.x-grid3 .zarafa-pinned .k-grid-button-pin {
	display: block;
	background-position: sprite-position($iconsmap, icon_pin, $offset-x: 3, $offset-y: 3);
}
.x-grid3 .zarafa-pinned .k-grid-button-pin:hover {
	background-position: sprite-position($iconsmap, icon_pin_dark, $offset-x: 3, $offset-y: 3);
}

.k-categories-grid .x-grid-editor {
	padding-top: 1px;
}

.k-categories-grid .x-grid3-col-color {
	position: relative;
}

.k-categories-grid .k-colorpicker-ct {
	display: none;
	margin: -2px 0 -2px 0;
}
.k-categories-grid .x-grid3-row-over .x-grid3-col-color,
.k-categories-grid .x-grid3-col-color.k-menu-visible {
	svg {
		display: none;
	}

	.k-colorpicker-ct {
		display: block;
	}
}

.k-slider
{
	position : absolute;
	z-index : 1000000000;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
	background-color: #FFFFFF;
	height: 30px;
	padding-left: 12px;
	padding-right: 12px;
	line-height: 2.5;
}