/*
//////////////////////////////////////////////////////////////////////////////////
// 																				//
// COPYRIGHT:  NICK VAN KOLLENBURG							 					//
// nickvankollenburg@gmail.com													//
// 																				//
//////////////////////////////////////////////////////////////////////////////////
*/


/* Loading icon
-------------------------------------------------------------- */
.loader {
	position: relative;
	width: 100%;
	height: 100%;
	min-width: 15px;
	min-height: 15px;
	max-width: 200px;
	max-height: 200px;

	border-radius: 50%;

	/* Background-ring */
	background: var(--loader-background);
	box-shadow: var(--loader-shadow);
}

.loader-ring {
	position: absolute;
	inset: 0;

	border-radius: 50%;

	/* Create a filled circle with the gradient */
	background: var(--color-loader-gradient);

	/* Create a ring from the filled circle */
	mask: var(--loader-mask);
	-webkit-mask: var(--loader-mask);

	animation: loader-spin 1.5s linear infinite;
}

@keyframes loader-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}


/* Layover
-------------------------------------------------------------- */
@media screen and (min-width:  0px)  {
	div.layover {
		max-width: 90%;
	}
}
@media screen and (min-width: 1100px) {
	div.layover {
		max-width: 70%;
	}
}
@media screen and (min-width: 1500px) {
	div.layover {
		max-width: 40%;
	}
}

div.layover-alpha {
	position: fixed;
	z-index: 99950;
	
	width: 100%;
	height: 100%;
	
	top: 0;
	left: 0;
	
	margin: 0px;
}
div.layover-alpha-background {
	background: var(--alpha-background);
	backdrop-filter: var(--alpha-background-blur);
	-webkit-backdrop-filter: var(--alpha-background-blur);
}
div.layover {
	background: var(--color-layover-gradient);
	box-shadow:  var(--layover-shadow);
	
	border: var(--layover-border);
	border-radius:  var(--border-radius);
	
	position: absolute;
	z-index: 99951;
	
	max-height: 85%;
	overflow-x: none;
	overflow-y: auto;
	
	left:-2500px;
	top:-2500px;
	
	margin: 0px auto;
}
div.layover-inner {
	position: relative;
	width: 100%;
}
div.layover-padding {
	padding: 10px 10px 15px 10px;
}
div.layover-header {
	border-bottom: 1px solid transparent;
	border-image: var(--color-border-gradient);
	
	display: flex;
	justify-content: space-between;
	align-items: start;
	
	width: 100%;
	
	padding-bottom: 10px;
}
div.layover-title {
	cursor: default;
	
	color: rgb(var(--layover-title-color));
	
	font-family: var(--layover-title-font);
	font-size: var(--layover-title-font-size);
	font-weight: var(--layover-title-font-weight);
	line-height: var(--layover-title-font-line-height);
	
	position: relative;
	top: 4px;
	padding-right: 25px;
}
div.layover-close {
	cursor: pointer;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	
	background-color: rgb(var(--color-secondary));
	background-image: url(../images/icons/buttons/close.svg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	border-radius: var(--border-radius);
	
	width: 25px;
	height: 25px;
	
	transition:
		transform 0.2s ease-in-out,
		opacity 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}
div.layover-close:hover {
	transform: scale(1.02);
	opacity: .7;
	box-shadow: 0 0px 10px #999;
}
div.layover-drag {
	cursor: move;
}
div.layover-content {
	margin-top: 10px;
}

/* For devices with a minimum width of 0px (Small) */
@media screen and (min-width:  0px)  {
		
	div.layover {
		min-width: 50%;
	}
}

/* For devices with a minimum width of 1025px (Large) */
@media screen and (min-width:  1025px)  {
		
	div.layover {
		min-width: 0;
	}
}


/* Prompts
-------------------------------------------------------------- */
div.prompt-alpha {
	background: var(--alpha-background);
	backdrop-filter: var(--alpha-background-blur);
	-webkit-backdrop-filter: var(--alpha-background-blur);
	
	position: fixed;
	z-index: 99990;
	
	width: 100%;
	height: 100%;
	
	top: 0;
	left: 0;
	
	margin: 0px;
}
div.prompt-alpha-alert {
	background: var(--alpha-background);
	backdrop-filter: var(--alpha-background-blur);
	-webkit-backdrop-filter: var(--alpha-background-blur);
	
	position: absolute;
	z-index: 99992;
	left:-500px;
	top:-500px;
	
	width: 100%;
	height: 100%;
	
	margin: 0px;
}
div.prompt {
	background: var(--color-prompt-gradient);
	box-shadow:  var(--prompt-shadow);
	
	border: var(--prompt-border);
	border-radius: var(--prompt-radius);
	
	position: absolute;
	left:-500px;
	top:-500px;
	
	max-width: 90%;
	min-width: 350px;
	
	font-weight: var(--font-weight-bold);
	
	margin: 0px auto;
}
div.prompt-prompt {
	z-index: 99991;	
}
div.prompt-confirm {
	z-index: 99991;	
}
div.prompt-date {
	z-index: 99991;	
}
div.prompt-alert {
	z-index: 99993;
	top: -200%;
	left: -200%;
}
div.prompt-inner {
	position: relative;
	width: 100%;
}
div.prompt-padding {
	padding: 10px;
}
div.prompt-header {
	border-bottom: var(--prompt-header-border);
	
	padding-bottom: 10px;
	margin-bottom: 10px;
}
div.prompt-header span {
	color: rgb(var(--prompt-header-color));
	
	font-family: var(--prompt-header-font);
	font-size: var(--prompt-header-font-size);
	font-weight: var(--prompt-header-font-weight);
	line-height: var(--prompt-header-font-line-height);

	position: relative;
	top: 2px;
	
	padding-right: 25px;
}
div.prompt-content {
	font-size: 14.5px;
	line-height: 17px;
	
	padding: 0px 10px 5px 0px;
}
div.prompt-input {
	padding: 0px 10px 10px 0px;
}
div.prompt-buttons {
	padding: 10px 0px 5px 0px;
}
div.prompt-content ul {
	margin: 0px 20px;
	padding: 0px;
}
div.prompt-content li {
	padding: 2px 0px;
}


/* Context Menu
-------------------------------------------------------------- */
ul.contextmenu {
	font-size: var(--context-font-size);
	
	background: var(--context-background);
	box-shadow:  var(--shadow-overlay);
	
	border: var(--context-border);
	border-radius:  var(--border-radius);
	
	list-style: none;
	
	position: absolute;
	z-index: 99999;
	
	width: auto;
	margin: 0px;
	padding: 0px;
	
	top: 650px;
}
ul.contextmenu li.item {
	cursor: pointer;
	border-radius:  var(--border-radius);
	
	min-width: 200px;
	
	margin: 5px 5px;
	padding: 0px 5px 5px 5px;
	
	transition: transform 0.2s ease;
}
ul.contextmenu li.context-disabled {
	pointer-events: none;
	opacity: 0.5;
}
ul.contextmenu li.item:not(.context-disabled):hover {
	background-color: var(--context-item-hover);
}
ul.contextmenu li.item span {
	position: relative;
	top: 3px;
	left: 5px;
}
ul.contextmenu li.spacer {
	border-top: var(--context-spacer-border-color);
}


/* Tooltips
-------------------------------------------------------------- */
@media screen and (min-width: 0px)  {
	.tooltip-outline {
		min-width: 50px;
		max-width: 150px;
	}
}
@media screen and (min-width: 768px)  {
	.tooltip-outline {
		min-width: 50px;
		max-width: 150px;
	}
}
@media screen and (min-width: 1100px)  {
	.tooltip-outline {
		min-width: auto;
		max-width: 300px;
	}
}
.tooltip-outline {
	font-family: var(--tooltip-font);
	font-size: var(--tooltip-font-size);
	font-weight: var(--tooltip-font-weight);
	
	background-color: rgb(var(--tooltip-background));
	box-shadow:  var(--tooltip-shadow);
	
	border: var(--tooltip-border);
	border-radius:  var(--tooltip-border-radius);
	
	position:absolute;
	z-index: 999999;
	left:-500px;
	top:-500px;
	
	text-wrap: wrap;
	
	margin: 0px;
	padding: 3px 7px 3px 7px;
}
.tooltip-icon::before {
	content: "?";
	cursor: pointer;

	font-family: var(--tooltip-icon-font);
	font-size: var(--tooltip-icon-font-size);
	font-weight: var(--tooltip-icon-font-weight);
	
	line-height: 1;

	color: rgb(var(--color-white));
	background-color: rgb(var(--color-secondary));
	opacity: var(--tooltip-icon-opacity);
	
	position: relative;
	top: -2px;
	
	text-indent: -0.7px;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	width: 13px;
	height: 13px;

	margin-left: 10px;
	border-radius: 50%;
	
	transition: opacity 0.2s ease;
}


/* Grid
-------------------------------------------------------------- */
@media screen and (min-width:  0px)  {
	:root {
		--grid-column-count-1: 1;
		--grid-column-count-2: 1;
		--grid-column-count-3: 1;
		--grid-column-count-4: 1;
		--grid-gap: 30px;
	}
}

@media screen and (min-width:  768px)  {
}

@media screen and (min-width: 1400px) {
	:root {
		--grid-column-count-2: 2;
		--grid-column-count-3: 2;
		--grid-column-count-4: 2;
		--grid-gap: 70px;
	}
}

@media screen and (min-width: 1500px) {
	:root {
		--grid-column-count-3: 3;
		--grid-column-count-4: 3;
	}
}

@media screen and (min-width: 1700px) {
	:root {
		--grid-column-count-4: 4;
	}
}

@media screen and (min-width:  2200px) {
}
div.grid-1 {
	--grid-column-count: var(--grid-column-count-1);
}
div.grid-2 {
	--grid-column-count: var(--grid-column-count-2);
}
div.grid-3 {
	--grid-column-count: var(--grid-column-count-3);
}
div.grid-4 {
	--grid-column-count: var(--grid-column-count-4);
}
div.grid {
	position: relative;
	
	display: grid;
	gap: var(--grid-gap);
	
	grid-template-columns: repeat(var(--grid-column-count), minmax(0, 1fr));
}
div.grid div.grid-item {
	text-align: left;
	min-width: 0;
}
div.grid-column-content {
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
}


/* Panel display
-------------------------------------------------------------- */
div.panel {
	border-radius: var(--panel-border-radius);
	
	background: var(--color-panel-gradient);

	display: inline-block;
	padding: 7px 7px 0px 7px;
	
	width: calc(100% - 14px);
}
div.panel-shadow {
	box-shadow: var(--shadow-light);
}
div.panel-opacity {
	opacity: 0.8;
}
div.panel-opacity:hover {
	opacity: 1;
}

/** Gradient on main content or sidebar */
div.mybms-page div.mybms-page-content div.panel {
	background: var(--color-panel-large-gradient);
}
div.panel-sidebar {
	background: var(--color-panel-sidebar-gradient);
}

/** Header */
div.panel div.panel-header {
	font-weight: var(--font-weight-bold);
	border-bottom: 1px solid transparent;
}
div.panel div.panel-header-inner {
	background-color: var(--color-alpha-background);
	border-radius: var(--border-radius);
	
	display: block;
	padding: 5px 5px 5px 5px;
	margin-bottom: 7px;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	
}
div.panel div.panel-header-inner div {
	font-family: 'VagRounded';
	color: rgb(var(--color-secondary) / 0.7);
	
	transition:
		font-weight 0.2s ease-in-out,
		text-shadow 0.2s ease-in-out,
		color 0.2s ease-in-out,
		transform 0.2s ease-in-out;
}
div.panel-font-large div.panel-header-inner {
	font-size: 15px;
}
div.panel-color div.panel-header-inner div {
	color: rgb(var(--color-mybms));
	text-shadow: var(--text-shadow-mybms-light);
}
div.panel div.panel-header:hover div.panel-header-inner div.panel-header-title {
	font-weight: var(--font-weight-bold);
	text-shadow: var(--text-shadow);
	color: rgb(var(--color-secondary) / 1);
	transform: scale(1.02);
}
div.panel-color div.panel-header:hover div.panel-header-inner div.panel-header-title {
	text-shadow: var(--text-shadow-light);
	color: rgb(var(--color-secondary) / 0.7);
}
div.panel div.panel-header div.panel-header-inner div.panel-header-title::before {
	content: "::";
	display: inline-block;
	width: 13px;
	position: relative;
	top: -1px;
}
div.panel div.panel-header-inner span {
	color: rgb(var(--color-mybms));
}
div.panel-color div.panel-header-inner {
	color: rgb(var(--color-mybms));
}
div.panel-color div.panel-header-inner span {
	color: rgb(var(--color-text));
}

/** Title on main content */
div.mybms-page div.mybms-page-content  div.panel-large div.panel-content-inner div.panel-link:hover {
	font-weight: var(--font-weight-bold);
	text-shadow: var(--text-shadow);
	transform: scale(1.005);
	opacity: 0.8;
}

/** Header arrow */
div.panel div.panel-header-arrow {
	display: inline-block;
	
}
div.panel div.panel-header-arrow span {
	display: inline-block;
	
	width: 15px;
	height: 15px;
	
	background-repeat: no-repeat;
	background-size: contain;
	
	opacity: 0.5;
	
	transition:
		opacity 0.2s ease-in-out;
}
/** Hide both arrows on start because of a weird positioning bug */
div.panel div.panel-header-arrow span.panel-header-arrow-up {
	background-image: var(--arrow-up);
	display: none;
}
div.panel div.panel-header-arrow span.panel-header-arrow-down {
	background-image: var(--arrow-down);
	display: none;
}
div.panel div.panel-header:hover div.panel-header-arrow span {
	opacity: 1;
}

/** Content */
div.panel div.panel-content-spacer {
	height: 8px;
}
div.panel div.panel-content-inner {
	width: calc(100% - 5px);
	border-radius: var(--border-radius);
	margin: 2px 0px 10px 2px;
}
div.panel div.panel-content-inner .button {
	width: 100%;
}

/** Panel list */
div.panel div.panel-content-inner div.panel-list {
	color: rgb(var(--color-secondary) / 1);
	font-weight: var(--font-weight-normal);
	
	padding: 7px 0px 7px 5px;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	gap: 10px;
	
	flex-wrap: nowrap;
	white-space: nowrap;
}
div.panel div.panel-content-inner div.panel-list span:nth-child(1) {
	display: inline-block;
}
div.panel div.panel-content-inner div.panel-listarrow span:nth-child(1)::before {
	content: "";
	
	background-image: var(--arrow-right-mybms);
	background-repeat: no-repeat;
	background-size: contain;
	
	position: relative;
	top: 2px;
	margin-right: 5px;
	
	display: inline-block;
	
	width: 15px;
	height: 15px;
	
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
div.panel div.panel-content-inner div.panel-list span:nth-child(2) {
	font-weight: var(--font-weight-bold);
	color: rgb(var(--color-text));
	
	display: inline-block;
	padding-right: 15px;
	
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
div.panel div.panel-content-inner div.list-selected {
	color: rgb(var(--color-mybms));
	font-weight: var(--font-weight-bold);
}

/** Links */
div.panel div.panel-content-inner div.panel-link {
	cursor: pointer;
	
	background-color: var(--color-alpha-background);
	border-radius: var(--border-radius);
	
	margin-bottom: 7px;
	
	transition:
		font-weight 0.2s ease-in-out,
		text-shadow 0.2s ease-in-out,
		opacity 0.2s ease-in-out,
		transform 0.2s ease-in-out;
}
div.panel div.panel-content-inner div.panel-link:hover {
	font-weight: var(--font-weight-bold);
	text-shadow: var(--text-shadow);
	transform: scale(1.02);
	opacity: 0.8;
}

/** Panel resize */
div.panel-slide div.panel-content {
	overflow: hidden;
	transition: height 0.2s ease-in-out;
}
div.panel-slide div.panel-header {
	cursor: pointer;
}
div.panel.panel-slide-open div.panel-header {
	border-image: var(--color-mybms-border-gradient);
}
div.panel-large.panel-slide-open div.panel-header {
	border-image: var(--color-mybms-border-large-gradient);
}
div.panel-slide.panel-slide-closed div.panel-content {
	height: 0;
}


/* Tab Switch
-------------------------------------------------------------- */
div.tab-switch {
	display: flex;
	width: 100%;
}
div.tab-switch-item {
	cursor: pointer;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;

	flex: 1;
	box-sizing: border-box;
	text-align: center;

	font-family: var(--button-font);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	letter-spacing: var(--button-letter-spacing);

	text-decoration: none;
	text-transform: uppercase;

	color: rgb(var(--button-color));
	background-color: rgb(var(--button-color-background));

	border: 0;
	padding: 8px 20px;

	transition:
		opacity 0.2s ease-in-out;
}
div.tab-switch > div.tab-switch-item:first-child {
	border-top-left-radius: var(--button-border-radius);
	border-bottom-left-radius: var(--button-border-radius);
}

div.tab-switch > div.tab-switch-item:last-child {
	border-top-right-radius: var(--button-border-radius);
	border-bottom-right-radius: var(--button-border-radius);
}
div.tab-switch-item-active {
	background-color: rgb(var(--button-color-background-submit));
}
div.tab-switch-item:hover {
	opacity: 0.5;
}
div.tab-switch-item span {
	display: block;
	transition:
		transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}
div.tab-switch-item:hover span {
	text-shadow: 0 0px 10px var(--color-accent);
}