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

/* General
-------------------------------------------------------------- */
:root {
	
	/** Colors */
	--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: 10px 10px 20px rgb(var(--color-secondary) / 0.5);
	--text-shadow-ultra-light: 1px 1px 2px rgb(0 0 0 / 0.1);
	--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-overlay: 0px 5px 25px -1px rgb(0 0 0 / 0.25);
	
	/** Loading Icon */
	--loader-background: radial-gradient(
		circle,
		transparent 54%,
		rgb(255 255 255) 56%,
		rgb(230 230 230) 69%,
		transparent 71%
	);
	--loader-shadow: inset 0px 0px 10px 1px rgb(var(--color-secondary) / 0.2);
	--loader-mask: radial-gradient(
		circle,
		transparent 0 54%,
		black 56% 69%,
		transparent 71%
	);
	
	/** Alpha Background */
	--alpha-background: rgb(var(--color-light) / 0.2);
	--alpha-background-blur: blur(3px);
	
	/** Errors * Messages */
	--color-error-background: 210 210 210;
	--error-border: 1px solid #cccccc;
	--color-message-background: 210 210 210;
	--message-border: 1px solid #cccccc;
	
	/** Buttons */
	--button-icon-width: 40px;
	--button-icon-height: 40px;
	
	--button-font: 'Roboto', sans-serif;
	--button-font-size: 16px;
	--button-font-weight: 700;
	--button-letter-spacing: 0em;
	
	--button-opacity-hover: .7;
	--button-color: var(--color-white);
	--button-color-background: var(--color-button-background);
	--button-color-submit: var(--color-tertiary);
	--button-color-background-submit: var(--color-submit-background);

	/** Inputs */
	--input-font: 'Inter', sans-serif;
	--input-font-weight: 400;
	--input-font-size: 18px;
	--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: 2px solid rgb(var(--color-input-border));
	--input-border-hover: 2px solid rgb(var(--color-input-border-hover) / 0.5);
	--input-border-active: 2px solid rgb(var(--color-input-border-active) / 0.5);
	
	--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;
	
	/** Construction Screen */
	--construction-font-h1: 'Arista';
	--construction-font-size-h1: 30px;
	--construction-font-h2: 'Arista';
	--construction-font-size-h2: 20px;
	
	/** 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;
	
	/** Checkbox */
	--checkbox-background: url(../images/icons/checkbox.svg);
	--checkbox-border: 1px solid rgb(var(--color-primary));
	--checkbox-shadow: inset 0px 0px 5px rgb(0 0 0 / 0.3);
	
	/** Layover */
	--layover-title-color: var(--color-secondary);
	--layover-title-font: 'VAGRounded';
	--layover-title-font-size: 20px;
	--layover-title-font-weight: var(--font-weight-bold);
	--layover-title-line-height: 19px;
	--layover-shadow: 5px 5px 16px -8px #868686;
	--layover-border: 1px solid #ccc;
	
	/** Prompts */
	--prompt-header-color: var(--color-secondary);
	--prompt-header-font: 'VagRounded';
	--prompt-header-font-size: 20px;
	--prompt-header-font-weight: var(--font-weight-bold);
	--prompt-header-line-height: 19px;
	--prompt-header-border: 1px solid #ccc;
	--prompt-border: 1px solid #ccc;
	--prompt-shadow: 5px 5px 16px -8px #868686;
	--prompt-radius: var(--border-radius);
	
	/** Tooltip */
	--tooltip-font: 'Roboto';
	--tooltip-font-size: 12px;
	--tooltip-font-weight: var(--font-weight-bold);;
	--tooltip-background: var(--color-white);
	--tooltip-shadow: 5px 5px 16px -8px #868686;
	--tooltip-border: 1px solid #ccc;
	--tooltip-border-radius: var(--border-radius);
	--tooltip-icon-font: 'VAGRounded';
	--tooltip-icon-font-size: 10px;
	--tooltip-icon-font-weight: var(--font-weight-bold);
	--tooltip-icon-opacity: 0.5;
	
	/** Gradients */
	--color-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-layover-gradient: linear-gradient(
		150deg,
		rgb(var(--color-secondary) / 1) 0%,
		rgb(var(--color-light) / 1) 10%,
		rgb(var(--color-white) / 1) 15%,
		rgb(var(--color-light) / 1) 65%,
		rgb(var(--color-secondary) / 1) 100%
	);
	--color-prompt-gradient: linear-gradient(
		150deg,
		rgb(var(--color-secondary) / 1) 0%,
		rgb(var(--color-light) / 1) 20%,
		rgb(var(--color-light) / 0.3) 74%,
		rgb(var(--color-secondary) / 1) 100%
	);
	--color-border-gradient: linear-gradient(
		95deg,
		rgb(var(--color-secondary)) 0%,
		rgb(var(--color-medium)) 20%,
		transparent 85%
	) 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-mybms-medium) / 0.45) 0%,
		rgb(var(--color-mybms-light) / 0.1) 10%,
		rgb(var(--color-mybms-light) / 0.3) 90%,
		rgb(var(--color-mybms-medium) / 0.6) 100%
	);
	--color-tracking-cookie-layover-gradient: linear-gradient(
		150deg,
		rgb(var(--color-secondary) / 0.3) 0%,
		rgb(var(--color-white) / 0.7) 10%,
		rgb(var(--color-light)  / 0.2) 94%,
		rgb(var(--color-secondary) / 0.2) 100%
	);
	--color-footer-gradient: linear-gradient(
		150deg,
		rgb(var(--color-tertiary) / 1) 0%,
		rgb(var(--color-primary) / 1) 80%
	);
	
	/** Application */
}

/** Fonts */
@media screen and (min-width:  0px)  {
	:root {
		--font-size: 16px;
		--font-line-height: 21px;
		--font-weight-normal: 400;
		--font-weight-bold: 700;
		
		--font-size-h1: 30px;
		--font-line-height-h1: 35px;
		--font-size-h2: 25px;
		--font-line-height-h2: 32px;
	}
}
@media screen and (min-width:  768px)  {
	:root {
		--font-size-h1: 40px;
		--font-line-height-h1: 45px;
		--font-size-h2: 25px;
		--font-line-height-h2: 32px;
	}
}
@media screen and (min-width:  1024px)  {
	:root {
		--font-size: var(--font-app-size);
		--font-line-height: var(--font-app-line-height);
	}
}
@media screen and (min-width:  1500px)  {
	:root {
		--font-size-h1: 57px;
		--font-line-height-h1: 65px;
		--font-size-h2: 40px;
		--font-line-height-h2: 45px;
	}
}

/** Layout */
:root {
	--line-height: 2px;
	--content-line-height: 2px;
	--content-section-line-height: 2px;
	
	--content-section-margin-top: 75px;				/** Sections */
	--content-header-margin-top: 10px;				/** Page Fields */
	--content-column-margin-top: 20px;				/** Page Column Fields */
}