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

/* General
-------------------------------------------------------------- */
:root {
	
	/** Fonts */
	--font-size: 13px;
	--font-line-height: 19px;
	--font-weight-normal: 400;
	--font-weight-bold: 700;
	
	--font-size-h1: 28px;
	--font-line-height-h1: 35px;
	--font-size-h2: 25px;
	--font-line-height-h2: 32px;
	
	/** Colors */
	--color-mybms: 78 163 220;
	--color-text: var(--color-tertiary);
	--color-white: 255 255 255;
	--color-offwhite: 244 244 244;
	
	--color-border-offwhite: 240 240 240;
	--color-border-active: 221 221 221;
	--color-border-table: 197 197 197;
	
	/** Border-radius */
	--border-radius: 5px;
	--button-border-radius: 3px;
	--input-border-radius: var(--border-radius);
	--panel-border-radius: 10px;
	--checkbox-border-radius: 3px;

	/** Shadows */
	--text-shadow: 1px 1px 2px rgb(0 0 0 / 0.3);
	--text-shadow-light: 1px 1px 2px rgb(0 0 0 / 0.2);
	--text-shadow-ultra-light: 1px 1px 2px rgb(0 0 0 / 0.1);
	--text-shadow-mybms: 1px 1px 2px rgb(78 163 220 / 0.3);
	--text-shadow-mybms-light: 1px 1px 2px rgb(78 163 220 / 0.2);
	--shadow: 0 0px 10px rgb(0 0 0 / 0.5);
	--shadow-light: 0 0px 10px rgb(0 0 0 / 0.3);
	--shadow-bottom: 0 2px 5px rgb(0 0 0 / 0.35);
	--shadow-bottom-light: 0 2px 5px rgb(0 0 0 / 0.25);
	--shadow-top: 0px -5px 5px -1px rgb(0 0 0 / 0.3);
	--shadow-left: -5px 0 5px rgb(0 0 0 / 0.35);
	--shadow-left-light: -5px 0 5px rgb(0 0 0 / 0.25);
	--shadow-right: 5px 0 5px rgb(0 0 0 / 0.35);
	--shadow-right-light: 5px 0 5px rgb(0 0 0 / 0.25);
	--shadow-content: inset 0px 0px 5px 5px rgb(0 0 0 / 0.25);
	--shadow-mybms: 0 0 4px rgb(78 163 220 / 0.45);
	--shadow-overlay: 0px 5px 25px -1px rgb(0 0 0 / 0.25);
	
	/** Buttons */
	--button-icon-width: 40px;
	--button-icon-height: 40px;
	
	--button-font: 'Arista', sans-serif;
	--button-font-size: 13px;
	--button-font-weight: 700;
	--button-letter-spacing: 0.08em;
	
	--button-opacity-hover: .7;
	--button-color: var(--color-white);
	--button-color-background: var(--color-button-background);
	--button-color-submit: var(--color-white);
	--button-color-background-submit: var(--color-submit-background);
	--button-color-mybms: var(--color-white);
	--button-color-background-mybms: var(--color-mybms);

	/** Inputs */
	--input-font: 'Inter', sans-serif;
	--input-font-weight: 400;
	--input-font-size: 16px;
	--input-font-size-small: 13px;
	
	--input-width: calc(100% - 14px);
	--input-padding: 8px 6px 6px 6px;
	
	--input-opacity: 1;
	--input-opacity-hover: 1;
	--input-opacity-active: 1;
	
	--input-border: 1px solid rgb(var(--color-input-border));
	--input-border-hover: 1px solid rgb(var(--color-input-border-hover));
	--input-border-active: 1px solid rgb(var(--color-input-border-active));
	
	--input-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
	--input-box-shadow-hover: inset 0 3px 10px rgba(0, 0, 0, 0.35);
	--input-box-shadow-active: inset 0 3px 10px rgba(0, 0, 0, 0.35);
	
	--switch-width: 45px;
	--switch-height: 25px;
	--switch-padding: 3px;
	
	/** Context Menu */
	--context-font-size: 12px;
	--context-background: rgb(243 243 243);
	--context-border: 1px solid rgb(234 234 234);
	--context-item-hover: rgb(234 234 234);
	--context-item-border-image: rgb(234 234 234);
	--context-spacer-border-color:  1px solid rgb(178 178 178);
	
	/** Datepicker */
	--datepicker-text-color: #333;
	--datepicker-background-color: rgb(255 255 255);
	--datepicker-border-color: rgb(255 255 255);
	--datepicker-color-hover: rgb(238 238 238);
	--datepicker-color-selected: rgb(255 189 189);
	--datepicker-color-current: rgb(202 219 252);
	--datepicker-color-bounds: rgb(153 153 153);
	--datepicker-overlay-border: 0;
	
	/** Gradients */
	--color-mybms-loader-gradient: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 200deg,
		rgb(var(--color-secondary) / 0.5) 270deg,
		rgb(var(--color-secondary)) 330deg,
		rgb(var(--color-secondary)) 360deg
	);
	--color-mybms-topbar-gradient: linear-gradient(
		128deg,
		rgb(var(--color-secondary) / 0.7) 0%,
		rgb(var(--color-offwhite)) 10%,
		rgb(var(--color-mybms-light)) 66%,
		rgb(var(--color-secondary) / 0.5) 100%
	);
	--color-mybms-tabs-gradient: linear-gradient(
		258deg,
		rgb(var(--color-secondary) / 1) 0%,
		rgb(var(--color-secondary) / 1) 10%,
		rgb(var(--color-mybms-light) / 1) 40%,
		rgb(var(--color-white) / 1) 80%,
		rgb(var(--color-secondary) / 1) 100%
	);
	--color-mybms-sidebar-gradient: linear-gradient(
		130deg,
		rgb(var(--color-secondary)) 0%,
		rgb(var(--color-secondary)) 3%,
		rgb(var(--color-white)) 20%,
		rgb(var(--color-mybms-light)) 76%,
		rgb(var(--color-secondary)) 100%
	);
	--color-mybms-navigation-gradient: linear-gradient(
		128deg,
		rgb(var(--color-mybms-light)) 0%,
		rgb(var(--color-white)) 33%,
		rgb(var(--color-mybms-light)) 66%,
		rgb(var(--color-mybms-light)) 100%
	);
	--color-mybms-light-gradient: linear-gradient(
		128deg,
		rgb(var(--color-secondary)) 0%,
		rgb(var(--color-white)) 10%,
		rgb(var(--color-mybms-light)) 66%,
		rgb(var(--color-secondary)) 100%
	);
	--color-secondary-gradient: linear-gradient(
		128deg,
		rgb(var(--color-secondary) / 0.6) 0%,
		rgb(var(--color-offwhite) / 1) 13%,
		rgb(var(--color-mybms-light) / 0.7) 66%,
		rgb(var(--color-secondary) / 0.7) 100%
	);
	--color-login-gradient: linear-gradient(
		128deg,
		rgb(var(--color-secondary)) 0%,
		rgb(var(--color-text) / 0.1) 33%,
		rgb(var(--color-mybms-light)) 66%,
		rgb(var(--color-secondary)) 100%
	);
	--color-transparent-gradient-top: linear-gradient(
		0deg,
		rgb(var(--color-white) / 0) 0%,
		rgb(var(--color-white) / 1) 90%
	);
	--color-transparent-gradient-bottom: linear-gradient(
		0deg,
		rgb(var(--color-white) / 1) 10%,
		rgb(var(--color-white) / 0) 100%
	);
	--color-mybms-border-gradient: linear-gradient(
		95deg,
		rgb(var(--color-secondary)) 0%,
		rgb(var(--color-mybms-medium)) 20%,
		transparent 85%
	) 1;
	--color-mybms-border-large-gradient: linear-gradient(
		95deg,
		rgb(var(--color-secondary) / 0.2) 0%,
		rgb(var(--color-mybms-medium) / 0.5) 20%,
		rgb(var(--color-mybms-medium) / 0.3) 70%,
		transparent 95%
	) 1;
	--color-mybms-border-vertical-gradient: linear-gradient(
		180deg,
		rgb(var(--color-secondary)) 0%,
		transparent 100%
	) 1;
	--color-mybms-panel-gradient: linear-gradient(
		140deg,
		rgb(var(--color-secondary)) 0%,
		rgb(var(--color-mybms-light)) 30%,
		rgb(var(--color-mybms-light)) 80%,
		rgb(var(--color-secondary) / 0.7) 100%
	);
	--color-mybms-panel-large-gradient: linear-gradient(
		140deg,
		rgb(var(--color-secondary) / 0.65) 0%,
		rgb(var(--color-offwhite) / 1) 10%,
		rgb(var(--color-mybms-light) / 0.3) 90%,
		rgb(var(--color-mybms-medium) / 0.6) 100%
	);
	--color-mybms-panel-sidebar-gradient: linear-gradient(
		140deg,
		rgb(var(--color-mybms-medium) / 0.45) 0%,
		rgb(var(--color-mybms-light) / 0.1) 30%,
		rgb(var(--color-mybms-light) / 0.3) 90%,
		rgb(var(--color-mybms-medium) / 0.6) 100%
	);
	--color-mybms-display-gradient: linear-gradient(
		150deg,
		rgb(var(--color-secondary) / 1) 0%,
		rgb(var(--color-white) / 1) 10%,
		rgb(var(--color-mybms-light) / 1) 94%,
		rgb(var(--color-secondary) / 1) 100%
	);
	--color-mybms-layover-gradient: linear-gradient(
		150deg,
		rgb(var(--color-secondary) / 1) 0%,
		rgb(var(--color-mybms-light) / 1) 10%,
		rgb(var(--color-white) / 1) 15%,
		rgb(var(--color-mybms-light) / 1) 85%,
		rgb(var(--color-secondary) / 1) 100%
	);
	--color-mybms-prompt-gradient: linear-gradient(
		150deg,
		rgb(var(--color-secondary) / 1) 0%,
		rgb(var(--color-white) / 1) 10%,
		rgb(var(--color-mybms-light) / 1) 94%,
		rgb(var(--color-secondary) / 1) 100%
	);
	--color-mybms-icon-gradient: linear-gradient(
		150deg,
		rgb(var(--color-mybms) / 0.7) 0%,
		rgb(var(--color-mybms) / 1) 20%,
		rgb(var(--color-mybms) / 1) 70%,
		rgb(var(--color-mybms) / 0.7) 95%
	);
}
@media screen and (min-width:  768px)  {
	:root {
		--font-size: 14px;
	}
}

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

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


/* MyBMS Layout
-------------------------------------------------------------- */
body.mybms-layout {
	
	/** Topbar general */
	--mybms-topbar-z-index: 600;
	--mybms-topbar-width: 100%;
	--mybms-topbar-height: 35px;
	
	/** Interface settings */
	--mybms-interface-settings-z-index: calc(var(--mybms-topbar-z-index) - 5);
	--mybms-interface-settings-width: 250px;
	
	/** Tabs */
	--mybms-tabs-z-index: calc(var(--mybms-topbar-z-index) - 10);
	--mybms-tab-display: none;
	--mybms-tabs-font-size: 14px;
	--mybms-tabs-width: 30px;
	--mybms-tabs-height: 30px;
	--mybms-tabs-top: 75px;

	/** Topbar notifications indent */
	--mybms-topbar-point-width: 0px;
	--mybms-topbar-indent-left: 0;
	--mybms-topbar-indent-width: 0;
	--mybms-topbar-indent-depth: 10px;
	--mybms-topbar-indent-right: calc(var(--mybms-topbar-indent-left) + var(--mybms-topbar-indent-width));
	
	/** Topbar logo */
	--mybms-topbar-logo-height: 35px;
	--mybms-topbar-logo-top: 2px;
	--mybms-topbar-logo-left: 5px;
	
	/** Topbar actions & icons */
	--mybms-topbar-actions-right: 40px;
	
	--mybms-topbar-icons-height: 28px;
	--mybms-topbar-icons-right: 10px;
	
	--mybms-topbar-interface-settings-layover-width: 430px;
	
	/** Topbar Loader */
	--mybms-topbar-loader-width: 25px;
	--mybms-topbar-loader-height: 25px;
	--mybms-topbar-loader-top: 0px;
	--mybms-topbar-loader-left: 10px;

	/** Navigation */
	--mybms-navigation-z-index: calc(var(--mybms-topbar-z-index) + 5);
	--mybms-navigation-title-font-size: 18px;
	--mybms-navigation-title-font-size: 13px;
	--mybms-navigation-font-size: 12px;
	--mybms-navigation-font-line-height: 17px;
	--mybms-navigation-width: 25px;
	--mybms-navigation-height: 25px;
	--mybms-navigation-top: 5px;
	--mybms-navigation-right: 10px;
	--mybms-navigation-hover-transform: scale(1.01);
	--mybms-navigation-box-width: auto;
	--mybms-navigation-item-padding: 0px 0px 1px 2px;
	
	--mybms-navigation-icon-width: 25px;
	--mybms-navigation-icon-height: 25px;
	--mybms-navigation-icon-top: 0px;
	
	--mybms-navigation-layover-z-index: calc(var(--mybms-topbar-z-index) + 100);
	--mybms-navigation-layover-width: 350px;
	--mybms-navigation-layover-top: calc(var(--mybms-navigation-top) + 15px);
	
	/** Breadcrumbs */
	--mybms-breadrumbs-width: 400px;
	--mybms-breadrumbs-height: 40px;
	--mybms-breadrumbs-top: 27px;
	--mybms-breadrumbs-right: 0;
	
	/** Sidebar panel */
	--mybms-sidebar-panel-width: 350px;
	--mybms-sidebar-panel-height: 500px;
	--mybms-sidebar-panel-top: 100px;
	--mybms-sidebar-panel-tab-width: 27px;
	--mybms-sidebar-panel-tab-height: 50px;
	--mybms-sidebar-panel-tab-top: 8px;
	--mybms-sidebar-panel-tab-left: -26px;
	--mybms-sidebar-panel-content-width: calc(var(--mybms-sidebar-panel-width) - 5px);
	--mybms-sidebar-panel-content-height: calc(var(--mybms-sidebar-panel-height) - 0px);
	--mybms-sidebar-panel-content-top: 0px;
	--mybms-sidebar-panel-content-left: 2px;
	--mybms-sidebar-panel-correction1: 0;
	
	/** Content */
	--mybms-content-top: 40px;
	--mybms-content-left: 0px;
	--mybms-content-width: 100%;
	--mybms-content-height: calc(100% -  var(--mybms-content-top));
	
	--mybms-minibar-width: 0px;
	--mybms-minibar-display: none;
	--mybms-minibar-icon-width: 40px;
	--mybms-minibar-icon-height: 40px;
	--mybms-minibar-icon-border-width: 0px;
	--mybms-minibar-icon-border-radius: var(--border-radius);
	--mybms-minibar-icon-notch-height: 10px;
	--mybms-minibar-icon-border-color: rgb(var(--color-mybms));
	--mybms-minibar-icon-background: var(--color-mybms-icon-gradient);
	
	--mybms-page-header-height: 42px;
	--mybms-page-header-button-width: 30px;
	--mybms-page-header-button-height: 30px;
	--mybms-page-sidebar-width: 275px;
	
	/** Tables */
	--mybms-table-header-row-height: 35px;
	--mybms-table-row-height: 20px;
	
	/** Arrow images */
	--arrow-up-white: url(../../images/icons/arrows/arrow-up-white.svg);
	--arrow-right-white: url(../../images/icons/arrows/arrow-right-white.svg);
	--arrow-down-white: url(../../images/icons/arrows/arrow-down-white.svg);
	--arrow-left-white: url(../../images/icons/arrows/arrow-left-white.svg);
	
	/** Select Box titles */
	--mybms-box-select-h2-font-size: 17px;
	--mybms-box-select-h2-margin: -2px;
	
	/** Color Palette Overwrite */
	--color-palette-background: var(--color-mybms-display-gradient);
}



/* Loading icon
-------------------------------------------------------------- */
.mybms-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:
		radial-gradient(
			circle,
			transparent 54%,
			rgb(255 255 255) 56%,
			rgb(230 230 230) 69%,
			transparent 71%
		);

	box-shadow: inset 0px 0px 10px 1px rgb(var(--color-secondary) / 0.2);
}

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

	border-radius: 50%;

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

	/* Create a ring from the filled circle */
	mask:
		radial-gradient(
			circle,
			transparent 0 54%,
			black 56% 69%,
			transparent 71%
		);

	-webkit-mask:
		radial-gradient(
			circle,
			transparent 0 54%,
			black 56% 69%,
			transparent 71%
		);

	animation: mybms-loader-spin 1.5s linear infinite;
}

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

	to {
		transform: rotate(360deg);
	}
}
.is-loading-cursor {
    cursor: progress;
}
.is-loading-opacity {
    opacity: 0.65;
}
.is-fetching {
    pointer-events: none;
}