/* ================================================================= */
/* CSS VARIABLES */
/* ================================================================= */

:root {
	--bdpCol: #EC2028;
	--bgCol: #fff;

	--bdpColPale: #EC202830;

	--bdpGrad: linear-gradient(90deg, rgba(236,32,40,1) 15%, rgba(217,30,37,1) 35%, rgba(191,27,32,1) 50%, rgba(217,30,37,1) 65%, rgba(236,32,40,1) 85%);

	--notif: #2F2F2F;

	--hidden: rgba(0,0,0,0.25);

	--active: #169E3A;
	--activeHOVER: #087224;
	--button: #767676;
	--buttonNA: #f2f2f2;
	--buttonHOVER: #000;
	--buttonFOCUS: var(--inputBGFOCUS);

	--inactive: #cdcdcd;

	--changed: var(--active);
	--changedHOVER: var(--activeHOVER);

	--ticked: var(--active);
	--crossed: var(--bdpCol);

	--inprogress: #9e1616;
	--inprogressHighlight: rgba(218,93,93,.15);
	--inprogressHighlightHOVER: rgba(218,93,93,.25);

	--reviewed: #e6ba11;
	--reviewedHOVER: #b49109;
	--reviewedHighlight: rgba(218,214,93,.15);
	--reviewedHighlightHOVER: rgba(218,214,93,.25);

	--finished: var(--active);
	--finishedHOVER: var(--activeHOVER);
	--finishedHighlight: rgba(93,218,99,.15);
	--finishedHighlightHOVER: rgba(93,218,99,.25);

	--txtCol: #000;
	--txtColAlt: #fff;
	--txtColAltHOVER: #000;

	--tableBG: #f6f6f6;
	--tableBGHOVER: #eee;

	--head: 36px;
	--tickSub: 24px;
	--tickSub2: 18px;
	--sub: 20px;
	--tableth: 18px;
	--body: 16px;
	--large: 30px;
	--xLarge: 80px;
	--font: proxima-nova-alt-ext-cond, sans-serif;
	--reg: 400;
	--bld: 700;
	--blk: 900;

	--contentWidth: 950px;

	--frontMargin: 1em;
	--frontHeaderHeight: 60px;
	--frontFooterHeight: 60px;
	--frontFullHeightCalc: calc(var(--frontHeaderHeight) + var(--frontFooterHeight));
	--frontGradVar1: linear-gradient(0deg, rgba(15, 0, 0, 0.85), rgba(15, 0, 0, 0.85));
	--frontGradVar2: linear-gradient(0deg, rgba(25, 0, 0, 0.85), rgba(25, 0, 0, 0.85));

	--globalMargin: 1em;
	--formsMargin: 6px;
	--formsBorder: 10px;
	--globalTransition: .25s ease-out;
	--linkTransition: .1s linear;

	--inputColor: #787878;
	--inputBG: #fcfcfc;
	--inputBGFOCUS: #fff;
	--inputBorderCol: #979797;
	--inputBorder: 1px solid var(--inputBorderCol);
	--inputBorderFOCUS: 1px solid #6c6c6c;
	--inputRadius: 0;
	--inputBoxShadow: none;
	--inputBoxShadowFOCUS: 0px 0px 10px #42424238;
	--inputHeight: 50px;
	--inputHeightTextarea: 200px;
	--inputWidth: 100%;
	--inputTransition: all .25s;
	--inputPadding: 12px;
	--inputTxt: 16px;
	--inputError: #e80000;
	--inputGap: 1em;

	--buttonTxt: 16px;
	--buttonTxtLrg: 20px;
	--buttonPadding: 12px 18px;
	--buttonHeight: 50px;

	--navTxt: 16px;

	--admin-height: 0px;
}

@media screen and (min-width: 420px) and (min-height: 656px) 
{
	:root {
		--head: 48px;
		--tickSub: 36px;
		--tickSub2: 24px;
	}
}

@media screen and (min-width: 481px) 
{
	:root {
		--globalMargin: 1.5em;
		--formsMargin: 1.5em;
	}
}

@media screen and (min-width: 1025px) and (min-height: 830px) 
{
	:root {
		--head: 60px;
		--tickSub: 48px;
		--tickSub2: 36px;
		--body: 18px;
		--buttonTxt: 18px;
		--navTxt: 18px;
		--inputTxt: 18px;
		--globalMargin: 3em;
		--formsMargin: 24px;
		--formsBorder: 30px;
		--buttonTxtLrg: 24px;
	}
}

.admin-bar {
	--admin-height: 32px;
}

@media screen and (max-width: 782px) 
{
	.admin-bar {
		--admin-height: 46px;
	}
}