/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
/* ========= Mohunkys Repsonsive Framework V6 ========= */
/* ================= MRWD SITE STYLES ================= */
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */


/*
		This style sheet is dead. Do not add, only remove!
		--------------------------------------------------

													 .""--..__
							 _                     []       ``-.._
						  .'` `'.                  ||__           `-._
						 /    ,-.\                 ||_ ```---..__     `-.
						/    /:::\\               /|//}          ``--._  `.
						|    |:::||              |////}                `-. \
						|    |:::||             //'///                    `.\
						|    |:::||            //  ||'                      `|
						/    |:::|/        _,-//\  ||
					   /`    |:::|`-,__,-'`  |/  \ ||
					 /`  |   |'' ||           \   |||
				   /`    \   |   ||            |  /||
				 |`       |  |   |)            \ | ||
				|          \ |   /      ,.__    \| ||
				/           `         /`    `\   | ||
			   |                     /        \  / ||
			   |                     |        | /  ||
			   /         /           |        `(   ||
			  /          .           /          )  ||
			 |            \          |     ________||
			/             |          /     `-------.|
		   |\            /          |              ||
		   \/`-._       |           /              ||
			//   `.    /`           |              ||
		   //`.    `. |             \              ||
		  ///\ `-._  )/             |              ||
		 //// )   .(/               |              ||
		 ||||   ,'` )               /              //
		 ||||  /                    /             || 
		 `\\` /`                    |             // 
			 |`                     \            ||  
			/                        |           //  
		  /`                          \         //   
		/`                            |        ||    
		`-.___,-.      .-.        ___,'        (/    
				 `---'`   `'----'`

*/




/* -------------------------------------------- */
/* ================= COLOURS ================== */
/* -------------------------------------------- */
:root	{
	/*--colorPrimary:#fd264f;*/
	--colorPrimaryHover:#e00029;
	--colorBlack:#000000;
	--colorOffBlack:#1c1c1c;
	--colorDarkGrey:#444445;
	--colorGrey:#707070;
	--colorLightGrey:#e2e2e2;
	--colorOffWhite:#f4f3ef;
	--colorWhite:#fff;
	--colorWhite80pc:rgba(255,255,255,0.8);
}

/* --------------------------------------------- */
/* ================== Buttons ================== */
/* --------------------------------------------- */
/* --- Normal Buttons --- */
a.button,
a.button:visited,
button,
.fauxBtn
{
	position: relative;
	display: inline-block;
	padding: 0.5625rem 1.5rem 0.3125rem 1.5rem;
	outline: none;
	border-radius: 1.5rem;
	border: 0.2142857rem solid var(--colorDarkGrey);
	background: var(--colorDarkGrey);
	font-size: 1.250rem;
	font-weight: 700;
	line-height: 1.250em;
	color: var(--colorWhite);
	text-decoration: none;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

	a.button:hover,
	button:hover
	{
		background: #323232;
		border-color: #323232;
		text-decoration: none;
		color: #fff;
		cursor: pointer;
	}

	.fauxBtn:hover
	{
		cursor: inherit;
	}

	button:disabled
	{
		cursor: not-allowed;
	}

/* --- Ghost Buttons --- */
	a.button.ghost,
	button.ghost,
	.fauxBtn.ghost
	{
		background-color: transparent;
		border-color: var(--colorPrimary);
		color: #323232;
	}

		a.button.ghost:hover,
		button.ghost:hover
		{
			background-color: var(--colorPrimary);
			color: #fff;
		}


/* --- Large Buttons --- */
a.button.large,
button.large,
.fauxBtn.large				{   font-size:1.250em;   }

/* --- Wide Buttons --- */
a.button.widest,
button.widest,
.fauxBtn.widest				{   box-sizing:border-box; width:100%; text-align:center;   }

/* --- Icon Buttons --- */
a.button.icnBtn,
button.icnBtn,
.fauxBtn.icnBtn				{   padding:0; border-width:0.2142857rem; border-color:var(--colorDarkGrey); background-color:transparent;   }
a.button.icnBtn svg,
button.icnBtn svg,
.fauxBtn.icnBtn svg			{   position:relative; display:block; width:2.250rem; height:2.250rem; fill:var(--colorDarkGrey);   }
a.button.icnBtn.white,
button.icnBtn.white,
.fauxBtn.icnBtn.white,
a.button.icnBtn.white:hover,
button.icnBtn.white:hover,
.fauxBtn.icnBtn.white:hover		{   border-color:var(--colorWhite); background-color:transparent;   }	
a.button.icnBtn.white svg,
button.icnBtn.white svg,
.fauxBtn.icnBtn.white svg	{   fill:var(--colorWhite);   }	

/* --- Small Buttons --- */
a.button.small,
button.small,
.fauxBtn.small				{   border-width:0.142857rem; font-size:0.875rem; line-height:.875rem;   }
a.button.tag,
button.tag,
.fauxBtn.tag				{   padding:0.250rem 0.750rem; font-size:0.750rem; text-transform:uppercase;   }
/* --- Small Icon Buttons --- */
a.button.small.icnBtn svg,
button.small.icnBtn svg,
.fauxBtn.small.icnBtn svg	{   width:1.750rem; height:1.750rem;   }


/* --- Button colours --- */
a.button.red,
button.red,
.fauxBtn.red				{   background-color:var(--colorPrimary); border-color:var(--colorPrimary);   }
a.button.red:hover,
button.red:hover			{   background-color:var(--colorPrimaryHover); border-color:var(--colorPrimaryHover);   }
a.button.white,
button.white,
.fauxBtn.white				{   background-color:var(--colorWhite); border-color:var(--colorWhite); color:var(--colorDarkGrey);   }
a.button.white:hover,
button.white:hover			{   background-color:var(--colorWhite); border-color:var(--colorWhite); color:var(--colorDarkGrey);   }
a.button.txtRed,
button.txtRed,
.fauxBtn.txtRed				{   color:var(--colorPrimary);   }
a.button.txtWhite,
button.txtWhite,
.fauxBtn.txtWhite			{   color:var(--colorWhite);   }

/* ---  Tab Buttons --- */
ul.tabs						{   display:block; margin:0; padding:0; list-style:none;   }
.tabs li					{   display:inline-block;   }
.tabs li button				{   border-bottom-right-radius:0; border-bottom-left-radius:0;   }
.tabs li.active button		{   background-color:var(--colorPrimary); border-color:var(--colorPrimary);   }

/* --- Copy Button --- */
.copyInput					{   display:inline-block; position:absolute; left:-999rem; overflow:hidden;   }
.copyBtn					{   border:none; vertical-align:middle;   }
.copyBtn .copyIcon svg		{   fill:var(--colorDarkGrey);   }
.copyBtn:hover .copyIcon svg{   fill:var(--colorPrimary);   }
.copyBtn .successIcon svg	{   fill:var(--colorPrimary);   }


/* --------------------------------------------- */
/* ================== Helpers ================== */
/* --------------------------------------------- */
.inlineIcn			{   position:relative; top:0.125rem; display:inline-block; width:1.250rem; height:1.250rem;   }


/* ------------------------------------------------------------------ */
/* ================== General & Reusable Elements =================== */
/* ------------------------------------------------------------------ */
.roundedPanel				{   padding:1rem; border-radius:1.5rem;   }
.roundedPanel.smallCorners	{   border-radius:0.500rem;   }
.roundedPanel.tinyCorners	{   border-radius:0.250rem;   }
.roundedPanel.noPadding		{   padding:0;   }
.roundedPanel.tightPadding	{   padding:0.500rem;   }

/* --- Loader --- */
#loaderPanel				{   display:flex; flex-grow:10; align-items:center; height:100%;   }
#loaderPanel.dispNone		{   display:none;   }
#loaderPanel .loader		{   width:3rem; height:3rem; margin:0 auto 8vh auto;   }
.miniLoader					{      }
.miniLoader .loader			{   width:3rem; height:3rem;   }

/* --- Password Strength Bar -- */
#pwStrength			{   position:relative; display:flex; box-sizing:border-box; width:100%; margin-bottom:1rem; padding:0; border-radius:4px; background-color:var(--colorGrey); overflow:hidden;   }
#pwStrength .line	{   box-sizing:border-box; flex-grow:2; height:0.500rem; margin:0; transition: all 0.25s ease-in-out;   }
#pwStrength .line.bgTransparent		{   background-color:transparent;   }
#pwStrength .line.bgRed				{   background-color:var(--colorPrimary);   }
#pwStrength .line.bgAmber			{   background-color:#e67e22;   }
#pwStrength .line.bgGreen			{   background-color:#2ecc71;   }



/* --- Base Layout --- */
#primaryLogo				{   width:18rem; height:3rem;   }
#appContainer				{   display:flex; flex-direction:column; box-sizing:border-box; width:100%; max-width:48rem; height:100%; max-height:72rem; padding:1rem 2rem; margin:0 auto; overflow:auto; background-color:var(--colorOffWhite);   }
#adminContainer							{   position:relative; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box; height:100vh; padding:0; overflow:auto;   }

#appContainer section		{   flex:1; width:100%;   }
#adminContainer	section		{   box-sizing:border-box; width:100%; padding:2rem;   }
footer						{   width:100%; align-self:flex-end;   }

/* --- Site Header --- */
#appHeader					{   box-sizing:border-box; width:100%; height:5.5rem; padding-bottom:1.5rem;   }
#hdrLogo					{   display:flex; justify-content:center;   }
#hdrLogo svg				{   width:3.500rem; height:2.6125rem; fill:var(--colorDarkGrey);   }
#sidebarLogo				{      }
#sidebarLogo svg			{   width:3.500rem; height:auto; fill:var(--colorDarkGrey);   }

/* --- Site Sidebar --- */
#siteSideBar				{   display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:610; overflow-y:auto; overflow-x:hidden;
								box-sizing:border-box; width:16rem; height:100%; padding:1rem; background-color:var(--colorOffWhite);
								box-shadow:0.125rem 0.125rem 0.750rem 0.250rem rgba(28, 30, 35,0.5);
								transition: all 0.25s ease-in-out;   }
#sidebarLogo img			{   width:2rem;   }
#siteSideBar .flexGrow		{   flex-grow:2;   }


#siteSideBar.collapsed				{   width:4rem;   }
#siteSideBar #sideBarNav			{   position:relative; left:0; min-width:14rem;
										transition: all 0.25s ease-in-out;   }
#siteSideBar.collapsed #sideBarNav	{   left:-17rem;   }

/* --- Site Footer --- */
#masterFtr					{      }
#ftrLogo					{      }


/* ------------------------------------------------ */
/* ================== Dashboard =================== */
/* ------------------------------------------------ */
#dashboard					{      }
ul#dashMoods				{   display:flex; flex-wrap:wrap; margin:0 -0.500rem; padding:0; list-style:none;   }
#dashMoods li				{   box-sizing:border-box; width:33.3334%; margin:0; padding:0.500rem;   }
#dashMoods li svg			{   width:4rem;   }

a.dashPanel,
a.dashPanel:visited			{   display:block; text-decoration:none; color:var(--colorDarkGrey);   }

.dashPanelHeader			{   display:flex;   }
.dashPanelHeader .left		{   width:50%;   }
.dashPanelHeader .right		{   width:50%;   }



/* ---------------------------------------------------- */
/* ================== Paged Content =================== */
/* ---------------------------------------------------- */
#appContainer #pagedContent				{   width:100vw; max-width:48rem; min-width:320px; margin:0 -2rem; padding:0; overflow:hidden;   }
#pagedContent ul#pages					{   position:relative; left:0; display:flex; width:calc(100% * 24); margin:0; padding:0; list-style:none;
											transition: all 0.25s ease-in-out;   }
#pagedContent ul li.page				{   box-sizing:border-box; width:4.16667%; padding:0 1.250rem;   }
#pagedContent label						{   width:100%; margin:0; padding:0;   }
#pagedContent input[type=radio]			{   display:none;   }
#pagedContent input:checked ~ .fauxBtn	{   border-color:var(--colorPrimary); background-color:var(--colorPrimary); color:var(--colorWhite);   }

/* --- Pagination Slider --- */
#pagination input[type="range"]							{   -webkit-appearance: none !important; width:100%; height:0.375rem; margin:0.750rem 0; border:none; border-radius:0.250rem; background-color:var(--colorPrimary); transition: all 0.5s ease-in-out;   }
#pagination input[type="range"]::-webkit-slider-thumb	{   -webkit-appearance: none !important; width:1.750rem; height:1.750rem; border:0.250rem solid var(--colorPrimary); border-radius:1rem; background-color:var(--colorOffWhite); transition: all 0.5s ease-in-out;  }

/* --- Pagination Buttons --- */
.pagination					{   display:block; margin:0; padding:0; list-style:none;   }
.pagination li				{   display:inline-block;    }
.pagination a.button		{   min-width:1.6875em; margin:0 0.250rem; padding:0.375em 0 0.25em 0; text-align:center; line-height:100%;   }
.pagination a.active		{   background-color:var(--colorPrimary); border-color:var(--colorPrimary);   }
.pagination a.active:hover	{   cursor:default;   }


/* ---------------------------------------------------- */
/* ================== Account Stuff =================== */
/* ---------------------------------------------------- */
.editField				{   position:relative; padding:1.125rem 1rem 0.750rem 1rem; text-align:left;   }
.editField p			{   margin-bottom:0; line-height:1rem; font-size:1rem; font-weight:700; text-transform:uppercase;   }
.editField button		{   display:flex; justify-content:flex-end; position:absolute; top:0; left:0; width:100%; height:100%; border-color:var(--colorWhite); background-color:transparent;   }
.editField button svg	{   width:1.5rem; height:1.5rem; fill:var(--colorPrimary);   }


/* --------------------------------------------------------- */
/* ================== Mood Profile Chart =================== */
/* --------------------------------------------------------- */

#chartRenderer			{   height:38vh; max-height:34rem; min-height:16rem;   }
.chartRendererSmall		{   height:11vh; max-height:11rem; min-height:11rem;   }

svg.icnNoData				{   width:6rem; height:auto; margin-bottom:1rem; fill: var(--colorPrimary);   }
.svgPickProfile				{    width: 10rem;    height: auto;    margin-bottom: 1rem;    fill: var(--colorPrimary);    margin: 7rem auto 1rem auto;}


#chartRenderMoodScore.chartRendererSmall			{      }
#chartRenderer .noData							{   display:flex; flex-direction:column; justify-content:center; height:100%;   }
#chartRenderProfile.chartRendererSmall .noData							{   display:flex; flex-direction:column; justify-content:center; height:100%;   }
#chartRenderMoodScore.chartRendererSmall .noData						{   display:flex; flex-direction:column; justify-content:center; height:100%; padding-left:20.5%;   }
#chartRenderer .noData .button.red								{   max-width:15rem; margin:0 auto;   }
#chartRenderProfile.chartRendererSmall .noData .button.red,
#chartRenderMoodScore.chartRendererSmall .noData .button.red			{   display:none;   }
#chartRenderProfile.chartRendererSmall .noData p,
#chartRenderMoodScore.chartRendererSmall .noData p						{   margin-bottom:0;   }
#chartRenderer .noData svg.icnNoData,
#chartRenderProfile.chartRendererSmall .noData svg.icnNoData,
#chartRenderMoodScore.chartRendererSmall .noData svg.icnNoData			{   width:4rem; margin:0 auto 1rem auto;   }
#completedProfileChart .noData							{  display: flex; flex-direction: column; justify-content: center;   align-items: center;    margin-top: 100px;}

/* --- Y Axis --- */
#yAxis ul				{   display:flex; flex-wrap:wrap; justify-content:flex-end; width:3.5rem; height:100%; margin:0 0.5rem 0 0; padding:0; list-style:none; text-align:right; font-weight:700; font-size:0.875rem;   }
#yAxis ul li.vEnd		{   align-self:flex-end;   }
#yAxis ul li.vCenter	{   align-self:center; font-size:0.625rem;   }
#yAxis ul li.vStart		{   align-self:flex-start;   }

/* --- X Axis --- */
ul#xAxis				{   display:flex; margin:0; padding:0.250rem 0 0 4rem; list-style:none; font-weight:700; font-size:0.875rem;   }
#xAxis li				{   display:block; flex-grow:1; padding:0;   }
#xAxis li img			{   display:block; width:2rem; height:2rem; margin:0 auto;   }
#xAxis li svg			{   display:block; width:2rem; margin:0 auto;   }

ul#xAxisSmall			{   display:flex; margin:0; padding:0.250rem 0 0 4rem; list-style:none; font-weight:700; font-size:0.875rem;   }
#xAxisSmall li			{   display:block; flex-grow:1; padding:0;   }
#xAxisSmall li img		{   display:block; width:1.5rem; height:1.5rem; margin:0 auto;   }
#xAxisSmall li svg		{   display:block; width:1.5rem; margin:0 auto;   }

/* --- Benchmark Key --- */
ul#benchmarkKey			{   margin:0.5rem 0 0 0; padding:0; list-style:none;   }
#benchmarkKey li		{   display:inline-block; margin-right:0.5rem; font-size:0.9375rem; font-weight:700; white-space:nowrap;   }
.resultsKey				{   position:relative; bottom:-0.375rem; display:inline-block; width:1.5rem; height:1.5rem;   }
.resultsKey svg			{      }
.resultsKey				{      }

/* --- Mood score --- */
#moodscorePanel			{   padding-top:0.500rem; padding-bottom:0.250rem;   }
#moodscorePanel p		{   line-height:2.25rem; font-weight:700;   }

/* --- Timeline Scrubber --- */
#scrubber input[type="range"]						{   -webkit-appearance: none !important; width:100%; height:0.375rem; margin:0.750rem 0; border:none; border-radius:0.250rem; background-color:var(--colorPrimary); transition: all 0.5s ease-in-out;   }
#scrubber input[type="range"]::-webkit-slider-thumb	{   -webkit-appearance: none !important; width:1.750rem; height:1.750rem; border:0.250rem solid var(--colorPrimary); border-radius:1rem; background-color:var(--colorOffWhite); transition: all 0.5s ease-in-out;  }


/* ----------------------------------------------------- */
/* ==================== Navigation ===================== */
/* ----------------------------------------------------- */

/* --- Sidebar Nav --- */
nav#sideBarNav				{   width:100%;   }
#sideBarNav ul				{   display:block; width:100%; margin:0; padding:0; font-size:1rem; list-style:none;   }
#sideBarNav ul li			{   display:block; padding:0 0 0.500rem 0;   }
#sideBarNav ul li .button	{      }
#sideBarNav ul li .button.current	{   border-color:var(--colorPrimary); background-color:var(--colorPrimary);   }

/* --- Footer Nav --- */
footer nav			{      }
footer nav a		{   display:inline-block; margin:0 0.750rem; color:var(--colorDarkGrey);   }
footer nav a:hover	{   color:var(--colorPrimary);   }

/* ------------------------------------------------ */
/* ==================== Forms ===================== */
/* ------------------------------------------------ */
.formMandatory			{   color:#ed000c;   }

label					{   display:inline-block; padding:0 1.625em 0.250em 1.625em;   }
label:hover				{   cursor:pointer;   }
label.checboxLabel		{      }
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=search],
input[type=date]		{   display:inline-block; box-sizing:border-box; width:100%; padding:0.5625em 1.5em 0.3125em 1.5em; border-radius:1.5em; border:0.125rem solid var(--colorWhite); outline:none; background:var(--colorWhite); font-size:1.250rem; font-weight:700; line-height:1.250em;   }
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=date]:focus	{   border-color:var(--colorPrimary);   }
textarea				{   display:inline-block; box-sizing:border-box; width:100%; max-width:100%; min-width:100%; min-height:10em; padding:0.5em 1.5em 0.375em 1.5em; border-radius:1.5em 1.5em 0 1.5em; border:0.125rem solid var(--colorWhite); outline:none; background:var(--colorWhite);   }
textarea:focus			{   border-color:var(--colorPrimary);   }

/* --- Drop Down Lists --- */
.selectWrapper						{   position:relative; text-transform:uppercase; background:var(--colorDarkGrey); border-radius:1.5em;   }
.selectWrapper select				{   position:relative; z-index:2; display:inline-block; width:100%; padding:0.5625em 2.5em 0.3125em 2.5em; border:none; outline:none; background-color:transparent; color:var(--colorWhite); text-align:center;
										-webkit-user-select:none; -moz-user-select:-moz-none; -ms-user-select:none; user-select:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;   }
.selectWrapper option				{   color:var(--colorDarkGrey);   }
.selectWrapper.red					{   background-color:var(--colorPrimary);   }
.selectWrapper.small select			{   padding:0.5625em 2.25em 0.3125em 1.25em;   }
.selectWrapper select::-ms-expand	{   display:none;   }
.selectWrapper select:hover			{   cursor:pointer;   }
.selectWrapper select option		{      }
.selectWrapper label				{   position:absolute; bottom:0.500rem; right:0.750rem; z-index:1; display:block; width:1rem; height:1rem; margin:0; padding:0;   }
.selectWrapper .downArrow			{   position:relative; z-index:-1; display:block; width:1em; height:1em;   }

.selectWrapper.bgWhite				{   background-color:var(--colorWhite);   }
.selectWrapper.bgWhite select		{   color:var(--colorDarkGrey);   }
.selectWrapper.bgWhite .downArrow.fillWhite	{   fill:var(--colorDarkGrey);   }




/* --- Radio Button List --- */
.radioList								{   overflow:hidden;   }
.radio									{   float:left; margin-right:0.750em;   }
.radio:hover							{   cursor:pointer;   }
.radio .radioButton						{   display:inline-block; position:relative; top:0.125em; box-sizing:border-box; width:1em; height:1em; border:0.1875em solid #fff; border-radius:0.5em; background-color:#fff;
											box-shadow: 0 0 0 0.0625em #a7a7a7; -webkit-box-shadow: 0 0 0 0.0625em #a7a7a7; -moz-box-shadow: 0 0 0 0.0625em #a7a7a7;   }
.radio input:checked ~ .radioButton		{   background-color:var(--colorPrimary);   }

/* --- Checkboxes --- */
input[type=checkbox]					{      }
.check									{   display:inline-block;   }
.check input[type=checkbox]				{   display:none;   }
.check .checkBox						{   position:relative; display:inline-block; width:1.250rem; height:1.250rem; padding:0; border:0.125rem solid var(--colorDarkGrey); border-radius:0.125rem; background-color:#fff;   }
.check .checkBox svg					{   position:absolute; top:-0.0625rem; left:-0.125rem; width:1.5rem; height:1.5rem; fill:var(--colorWhite);   }
.check input:checked ~ .checkBox		{   background-color:var(--colorPrimary);   }
.checkboxLabel							{   position:relative; top:-0.500rem; margin-left:0.250rem; padding:0; font-size:0.875rem; font-weight:700;   }

/* --- Error Messages --- */
input.error,
textarea.error,
.selectWrapper.error		{   border-color:var(--colorPrimary) !important;   }
.formError					{   clear:both; margin:0.500rem 0; padding:0.375rem 1.500rem 0.375rem 1.500rem; border-radius:1.125rem; background-color:var(--colorPrimary); font-size:0.875rem; color:#fff;   }


/* --------------------------------------------- */
/* ================== Modals =================== */
/* --------------------------------------------- */
/* --- Actual Modals --- */
.tileModal							{   position:fixed; top:0; right:0; bottom:100vh; left:0; z-index:800;
										display:flex; align-items:center; justify-content:center; overflow:hidden;
										-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;   }
.modalTile							{   box-sizing:border-box; width:100%; max-height:100vh; padding:4rem 0; overflow:auto;   }
.modalTile .tile					{   display:block; height:0; overflow:hidden;
										-webkit-transition: all 0.675s ease-in-out; -moz-transition: all 0.675s ease-in-out; -o-transition: all 0.675s ease-in-out; transition: all 0.675s ease-in-out;   }
.modalTile .tile .tileHdr			{   display:block; box-sizing:border-box; padding:0.375rem 2rem 0 2rem;   }
.modalTile .tile .tileContent		{   display:block; box-sizing:border-box; padding:0 2rem;   }
.modalTile .tile .tileFtr			{   display:block; box-sizing:border-box; padding:1rem 2rem;   }
.tileModal .modalTile				{   position:relative; z-index:911;   }
.tileModal.active					{   bottom:0;   }
.active .modalTile .tile			{   height:100%;   }
.overlayBg							{   position:fixed; top:0; right:0; bottom:0; left:0; z-index:799; height:0; background-color:rgba(28, 30, 35,0.8); transition: all 0.25s ease-in-out;   }
.active .overlayBg					{   height:100%;   }

/* --------------------------------------------------------- */
/* ==================== Inline Editing ===================== */
/* --------------------------------------------------------- */

.inlineEdit								{   margin:0 -2rem; padding:0 2rem; background-color:var(--colorLightGrey);   }
.inlineEdit:not(.active) .row			{   opacity:0;   }
.inlineEdit:not(.active) .column		{   padding:0 1rem; font-size:0;   }
.inlineEdit:not(.active) label			{   font-size:0;   }
.inlineEdit:not(.active) input			{   padding:0 1.5em; border-width:0; font-size:0;   }
.inlineEdit:not(.active) .check			{   font-size:0; margin-top:0; margin-bottom:0;   }
.inlineEdit:not(.active) .check .checkBox	{   width:0; height:0; padding:0; overflow:hidden;   }
.inlineEdit:not(.active) button			{   padding:0 2em 0 2em; border-width:0; font-size:0;   }

/* hide */
.inlineEdit,
.inlineEdit:not(.active) .column,
.inlineEdit:not(.active) label,
.inlineEdit:not(.active) input,
.inlineEdit:not(.active) .check,
.inlineEdit:not(.active) .check .checkBox,
.inlineEdit:not(.active) button				{   transition-property:font-size, width, height, margin, padding, border; transition-duration:0.25s; transition-delay:0.375s;   }
.inlineEdit:not(.active) .row				{   transition-property:opacity; transition-duration:0.25s; transition-delay:0s;   }

/* reveal */
.inlineEdit.active,
.inlineEdit.active .column,
.inlineEdit.active label,
.inlineEdit.active input,
.inlineEdit.active button		{   transition-property: font-size, padding, border; transition-duration:0.125s; transition-timing-function:linear; transition-delay:0s;   }
.inlineEdit.active .row			{   transition-property:opacity; transition-duration:0.25s; transition-delay:0.5s;   }

.fetchSpinner { padding:0.75em }
.fetchSpinner img { float:left; width:1em; margin-right:0.5em; }

/* ----------------------------------------------- */
/* ================== Dropzone =================== */
/* ----------------------------------------------- */
/* --- Wizard Steps --- */
.wizardSteps					{   display:block; margin:0; padding:0; list-style:none; border-bottom: solid 1px #7e48df;  }
.wizardSteps li					{   display:inline-block; margin:0 1em 0 0; padding:.25em 1em; border-radius:1rem 1rem 0 0;    }
.wizardSteps li.active			{   background-color:#7e48df; border-color:#272a31; color:#fff;   }
.wizardSteps li.inactive		{   background-color:transparent; border-color:transparent;   }

/* --- Pre Upload --- */
.dropzone								{   display:flex; align-items:center; justify-content:center; min-height:16rem; border:0.125rem dashed #7f48df; border-radius:2rem; background:transparent; text-align:center;  }
.dropzone .dz-remove					{   margin:0.5rem 0 0 0;   }
.dropzone .dz-message					{   margin:0; font-size:1rem;   }
.dropzone .dz-message svg				{   width:9rem;   }
.dropzone .dz-image						{   width:7.5rem; height:7.5rem; padding:2em;   }

/* --- Post Upload --- */
.dropzone .dz-preview .dz-details				{   display:flex; flex-wrap:wrap; width:7.5rem; height:7.5rem; padding:0; text-align:center;   }
.dropzone .dz-preview .dz-details .dz-size		{   width:100%; align-self:flex-start; padding-top:0.5rem;   }
.dropzone .dz-preview .dz-details .dz-filename	{   width:100%; align-self:flex-end; padding-bottom:0.5rem;   }
.dropzone .dz-preview.dz-file-preview .dz-image,
.dropzone .dz-preview .dz-image					{   background:#1c1e23;   }
.dropzone .dz-preview.dz-image-preview			{   background:transparent;   }
.dropzone .dz-preview .dz-error-message			{   top:10rem;   }
.dropzone .dz-preview .dz-remove				{   color:var(--colorPrimary);   }

.dropzone .dz-preview:hover .dz-image img		{   transform:none; filter:none;   }
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { top:40%; color:var(--colorPrimary);	 }
.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span		{   background:transparent;   }
.dropzone .dz-preview .dz-details .dz-filename:hover span	{   border:none; background:transparent;   }

/* --- Validation --- */
.validationResults					{   margin:0 0 1rem 0; padding:1rem 1.250rem 0.750rem 1.250rem; border:0.0625rem solid var(--colorGrey); border-radius:1rem;   }
.validationResults ul				{   margin:0 0 0 1.5rem; padding:0; list-style:none; font-size:1.125rem;   }
.validationResults ul ul			{   margin:0 0 0 1rem; font-size:1.125rem;   }
.validationResults ul ul li:before {   content: "-"; margin-right:0.250rem;   }
.validationResults ul small			{   color:var(--colorPrimary);   }

@media only screen and (max-width: 600px) {
	/* -------------------------------------------------- */
	/* ================== Mobile Large ================== */
	/* -------------------------------------------------- */
	/* --- Base Layout --- */
	#appContainer			{   padding:0.250rem 1.250rem;   }
	#appContainer #pagedContent			{   margin:0 -1.250rem;   }

	/* --- Page Header --- */
	#hdrLogo				{      }

}
@media only screen and (max-width: 400px) {
	/* -------------------------------------------------- */
	/* ================== Mobile Small ================== */
	/* -------------------------------------------------- */
	:root					{   font-size:0.875em;   }

	#primaryLogo			{   width:16rem; height:2.500rem;   }

	#chartRenderMoodScore.chartRendererSmall .noData						{   padding-left:0%;   }
}