/*--------------------------------------------------*/
/*	OVERRIDE
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.context-menu {
    z-index: 4;
    position: fixed;
	top: 0;
	left: 0;

    width: 100vw;
    height: 100vh;

	overflow: visible;
}

/*--------------------------------------------------*/
/*	OPTICAL LOAD_GUARD
/*--------------------------------------------------*/

.context-menu .load_guard {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: transparent;
}

/*--------------------------------------------------*/
/*	MENU
/*--------------------------------------------------*/

/*
.context-menu .content {
	display: block;
	overflow: hidden;

	min-width: calc(44px * 7);
	max-height: calc(44px * 5 + 12px);

	padding: 5px;

	background-color: #F4F4F4;
	border: 1px solid var(--color-blue);

	-webkit-overflow-Y: scroll;
	   -moz-overflow-Y: scroll;
	    -ms-overflow-Y: scroll;
	     -o-overflow-Y: scroll;
	        overflow-Y: scroll;
}
*/

.context-menu .content {
	overflow: visible;
    position: absolute;

	margin: 15px;

    background: var(--background);
	border: 1px solid var(--color-blue);

	-webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
	   -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
	    -ms-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
	     -o-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
	        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
}

/*--------------------------------------------------*/
/*	MENU ARROW
/*--------------------------------------------------*/

.context-menu.open {
	z-index: 999;
}

/*
.context-menu.open ~ #webpage {
	filter: blur(1px);
}
*/

/* Desktop */
@media screen and (min-width: 1200px) {
	.context-menu.open .content:before,
	.context-menu.open .content:after {
		content: " ";
		position: absolute;

		width: 28px;
		height: 28px;

		border: 14px solid #0000;
	}

	.context-menu[arrow^="top"] .content {
		margin-top: 28px;
	}

	.context-menu[arrow^="top"] .content:before {
		top: -28px;
		border-bottom: 14px solid var(--color-blue);
	}

	.context-menu[arrow^="top"] .content:after {
		top: -27px;
		border-bottom: 14px solid var(--background);
	}

	.context-menu[arrow^="bottom"] .content {
		margin-bottom: 28px;
	}

	.context-menu[arrow^="bottom"] .content:before {
		bottom: -28px;
		border-top: 14px solid var(--color-blue);
	}

	.context-menu[arrow^="bottom"] .content:after {
		bottom: -27px;
		border-top: 14px solid var(--background);
	}

	.context-menu[arrow^="left"] .content {
		margin-left: 28px;
	}

	.context-menu[arrow^="left"] .content:before {
		left: -28px;
		border-right: 14px solid var(--color-blue);
	}

	.context-menu[arrow^="left"] .content:after {
		left: -27px;
		border-right: 14px solid var(--background);
	}

	.context-menu[arrow^="right"] .content {
		margin-right: 28px;
	}

	.context-menu[arrow^="right"] .content:before {
		right: -28px;
		border-left: 14px solid var(--color-blue);
	}

	.context-menu[arrow^="right"] .content:after {
		right: -27px;
		border-left: 14px solid var(--background);
	}

	.context-menu.open[arrow="top1"] .content:before,
	.context-menu.open[arrow="top1"] .content:after,
	.context-menu.open[arrow="bottom1"] .content:before,
	.context-menu.open[arrow="bottom1"] .content:after {
		left: 16px;
	}

	.context-menu.open[arrow="top2"] .content:before,
	.context-menu.open[arrow="top2"] .content:after,
	.context-menu.open[arrow="bottom2"] .content:before,
	.context-menu.open[arrow="bottom2"] .content:after {
		left: calc(50% - 14px);
	}

	.context-menu.open[arrow="top3"]  .content:before,
	.context-menu.open[arrow="top3"]  .content:after,
	.context-menu.open[arrow="bottom3"] .content:before,
	.context-menu.open[arrow="bottom3"] .content:after {
		right: 16px;
	}

	.context-menu.open[arrow="left1"]  .content:before,
	.context-menu.open[arrow="left1"]  .content:after,
	.context-menu.open[arrow="right1"] .content:before,
	.context-menu.open[arrow="right1"] .content:after {
		top: 16px;
	}

	.context-menu.open[arrow="left2"]  .content:before,
	.context-menu.open[arrow="left2"]  .content:after,
	.context-menu.open[arrow="right2"] .content:before,
	.context-menu.open[arrow="right2"] .content:after {
		top: calc(50% - 14px);
	}

	.context-menu.open[arrow="left3"]  .content:before,
	.context-menu.open[arrow="left3"]  .content:after,
	.context-menu.open[arrow="right3"] .content:before,
	.context-menu.open[arrow="right3"] .content:after {
		bottom: 16px;
	}
}

/* Mobile */
@media screen and (max-width: 1200px) {
	.context-menu .load_guard {
		background: #40404010;
	}

	.context-menu .content {
		position: fixed;
		top: 50% !important;
		left: 50% !important;

		max-width: 600px;
		max-height: calc(100% - 30px);

		margin: 0 !important;

		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}
}