/*****************************************************************/
/* STYLE SHEET FOR ATHLETIUM. BJORN MOREN 2023.                  */


/****** VARIABLES ************************************************/

:root 
{
	--fontSize:62.5%;						/* Overall font size */
	--textSize:2.0rem;						/* Regular text size */
	--textSizeSmall:1.8rem;					/* Small text size (exercise variations, etc) */
    --textSizeSection:2.0rem;
	--maxPageWidth:50rem;					/* Max page width, default 50rem*/
	--symbolSize:1.4rem;					/* Calendar symbol size and font size */
	--symbolFontSize:1.6rem;

	--primaryColor:#f8d356;			  	/* Primary color (background of colored bars and top menu) */
	--gradientColor:#e5d16a;              	/* Shadow gradient for colored bars */
	--darkColor:#958845;          			/* Clickable text */

	--pageShadowColor:#000000b2;			/* Page background for dialog/form/message */
	--colorSaturation:1;                    /* Overall color saturation */
	--headerTextColor:#000000;             /* Header text color */
	--textColor:#000000;				  	/* Default text color */
	--barColor:#000000;					/* Background color of top bar and main rows */ 
	--barTextColor:#ffffff;
	--pageColor:#e0e0e0;					/* Background color of all pages */
	--rowColor:#c8c8c8;					/* Background color of row and other major features */
	--disabledGray:#c8c8c8;                 	/* Medium gray for backgrounds */
	--buttonColor:#ffffff;
}


/****** FONTS ****************************************************/

@font-face {
  font-family:'Chivo';
  font-style:normal;
  font-weight:400;
  src:url('images/chivo_regular.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Chivo';
  font-style:normal;
  font-weight:400;
  src:url('images/chivo_regular_ext.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Chivo';
  font-style:italic;
  font-weight:400;
  src:url('images/chivo_regular_italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Chivo';
  font-style:italic;
  font-weight:400;
  src:url('images/chivo_regular_italic_ext.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Chivo';
  font-style:normal;
  font-weight:700;
  src:url('images/chivo_bold.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Chivo';
  font-style:normal;
  font-weight:700;
  src:url('images/chivo_bold_ext.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Chivo';
  font-style:italic;
  font-weight:700;
  src:url('images/chivo_bold_italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Chivo';
  font-style:italic;
  font-weight:700;
  src:url('images/chivo_bold_italic_ext.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'ChivoExtraBold';
  font-style:normal;
  font-weight:700;
  src:url('images/chivo_extra_bold.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'ChivoExtraBold';
  font-style:normal;
  font-weight:700;
  src:url('images/chivo_extra_bold_ext.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:bold;
  src:url('images/MontserratBold.woff') format('woff');
}



/****** GENERAL **************************************************/

html
{
	font-size:var(--fontSize);
	overflow:hidden;
	position:fixed;
}

html * 
{
	max-height:1000000px;			/* Prevent font boosting in Google Chrome for Android */
	-webkit-tap-highlight-color:transparent;
}

body  
{
	display:block;
	width:100%;
	height:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
	color:var(--textColor);
	background-color:#ffffff;
	overflow:hidden;
	font-size:1.6rem;
	position:fixed;
}

div, p, input, textarea, select, button
{
	font-family:Chivo, Sans-Serif;
	line-height:1.3;
}

h1, h2
{
	font-family:ChivoExtraBold;
}

button:focus, .button:focus, input[type=text]:focus, input[type=email]:focus
{
	outline:0;
}

.introText
{
	background-color:#ffffff;
	padding:0 1.0rem 0 1.0rem;
}

p
{
	margin:0 0 0 0;
	padding:1.0rem 0 1.0rem 0;
}

ul
{
	margin:1.0rem 0 1.0rem 3.5rem;
	padding:0 0 0 0;	
}

li 
{
	margin:0 0 1.0rem 0;
    font-size:var(--textSize);
}

img
{
	user-drag:none; 
	user-select:none;
	-moz-user-select:none;
	-webkit-user-drag:none;
	-webkit-user-select:none;
	-ms-user-select:none;	
	-webkit-touch-callout:none;
}

#bodyWrapper
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	max-width:100%;
	height:100%;
	max-height:100%;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	background-color:#333333;
	filter:saturate(var(--colorSaturation));
}

#viewport
{
	position:relative;
	width:100%;
	max-width:var(--maxPageWidth) !important;
	/*margin:0 0 0 0;*/    /* left adjusted */
	margin:0 auto 0 auto;  /* Centered */
	overflow:hidden;
	flex-grow:1;
	flex-shrink:0;
}

#statusBar
{
	position:relative;
	width:100%;
	overflow:hidden;
	flex-grow:0;
	flex-shrink:0;
}

::selection 
{
  color: #ffffff;
  background: #000000;
}

/****** BUTTON ****************************************************/

/* Standard button, used with DIV. Width according to content. Centered text. */
.button
{
	cursor:pointer;
	min-height:2.8rem;
	border:0.2rem solid var(--buttonColor);
	padding:0.2rem 0.8rem 0 0.8rem;
	border-radius:0.8rem;
	margin:0 1.0rem 0 0;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:var(--textSize);
	font-weight:normal;
	line-height:1.0;
	text-transform:none;
	user-select:none;
	background-color:var(--buttonColor);
}
.button:last-child
{
	margin-right:0;
}
.button:active
{
	position:relative;
	top:0.2rem;
	left:0.1rem;
	box-shadow:none;
}
.button.disabled
{
	cursor:default;
	color:#999999;
	border:0.2rem solid #999999;
	background-color:var(--disabledGray);
	box-shadow:none;
}

.button.disabled:active
{
	position:relative;
	top:0rem;
	left:0rem;
	box-shadow:none;
}

.button.disabled img
{
	opacity:0.3;
}

/* Forces a single line of text, with overflow shown as an ellipsis. */
.button.oneLine .text
{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* Used instead of button. Fills up the same amount of space. */
.button.displacer
{
	border:0.2rem solid transparent;
	font-weight:normal;
	background-color:transparent;
	box-shadow:none;
}

.button.selected
{
	border:0.2rem solid var(--primaryColor);
	background-color:var(--primaryColor);
}

.button.bold
{
	font-weight:bold;
}

.button img
{
	flex-shrink:0;
	flex-grow:0;
	width:2.8rem;
	height:2.8rem;
	margin:-0.3rem 0.5rem -0.2rem -0.5rem;
}

/* Row of buttons. Spaced out evenly on the row. */
.buttonRow			
{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

/* Row of buttons, reverse order (right aligned). */
.buttonRowRight
{
	display:flex;
	justify-content:flex-end;
	flex-direction:row;
	align-items:center;
}

/* Row of buttons, reverse order (right aligned). */
.selectedButton
{
	display:flex;
	justify-content:flex-end;
	flex-direction:row;
	align-items:center;
	padding:0 2rem 0 0;
}

.selectedButton .button
{
	border-color:var(--gradientColor);
	background-color:var(--primaryColor);
}

.largeButton .button
{
	padding:0.7rem 2rem 0.7rem 2rem;
	border-radius:1.5rem;
}

/* Row of buttons, centered on the row tight together. */
.buttonRowCenter		
{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

/* Row of buttons, where the buttons fill the entire row */
.buttonRowFill		
{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
}
.buttonRowFill .button
{
	flex-grow:1;
}

.buttonContainer .buttonRowFill
{
	padding:0rem 1rem 1rem 1rem;
}

.buttonContainer .buttonRowFill:first-child
{
	padding:1rem 1rem 1rem 1rem;
}


/* Row of buttons for lists: buttons fill the entire row, button text aligned left */
.buttonRowListItem		
{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
}
.buttonRowListItem .button:first-child
{
	flex-grow:1;
	justify-content:flex-start;
}

.buttonRowListItem .button img 
{
	flex-shrink:0;
	flex-grow:0;
	width:2.8rem;
	height:2.8rem;
	margin:-0.3rem 0.5rem -0.2rem -0.5rem;
}

.buttonRowListItem .checkedImg
{
	width:3.2rem;
	height:3.2rem;
	flex-shrink:0;
	flex-grow:0;
	margin:-0.3rem 0.5rem -0.2rem -0.5rem;
}

/* Button with an icon inside, no text */
.iconButton
{
	cursor:pointer;
	width:4.5rem;
	height:3.5rem;
	margin:0;
	padding:0;
	display:flex;
	flex-shrink:0;
	flex-grow:0;
	justify-content:center;
	align-items:center;
	user-select:none;
}

.iconButton.large
{
	width:6.5rem;
}

.iconButton img
{
	width:3.5rem;
	height:3.5rem;
}
.iconButtonGroup
{
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-grow:0;
	flex-shrink:0;
	cursor:pointer;
}


/****** KEYBOARDS *************************************************/

.keyboardPage
{
	display:block;
	position:fixed;
	z-index:0;
	opacity:1;
	bottom:0;
	width:100%;
	max-width:var(--maxPageWidth);
	background-color:var(--pageColor);
	border-top:0.4rem solid #333333;
}

.keyboardFrame
{
	background-color:var(--pageColor);
	width:100%;
	max-width:38.85rem;
	margin:0 auto 0 auto;
	padding:0.4rem 0.4rem 0.4rem 0.4rem;
	border-spacing:0.6rem;
}

.keyboardTable
{
	table-layout:fixed;
}

.keyboardTable td
{
	cursor:pointer;
	font-size:3rem;
	text-align:center;
	vertical-align:middle;
	background-color:#ffffff;
	height:5rem;
	min-height:5rem;
	max-height:5rem;
 	overflow:hidden;
	border:0.2rem solid #ffffff;
	border-radius:0.8rem 0.8rem 0.8rem 0.8rem;
	padding:0 0 0 0;
	user-select:none;
}

.keyboardTable td.text
{
	font-size:2.2rem;
	font-weight:bold;
	font-family:ChivoExtraBold;
}

.keyboardTable td img
{
	width:4.2rem;
	height:4.2rem;
	vertical-align:middle;
	/*filter:drop-shadow(0 0 0.2rem white);	*/
}

.keyboardTable.dates td img
{
	width:3.2rem;
	height:3.2rem;
	vertical-align:middle;
}

.keyboardTable.dates td
{
	font-size:2.4rem;
	height:3.3rem;
	min-height:3.3rem;
	max-height:3.3rem;
}

.keyboardTable.dates td.title
{
	font-size:2.2rem;
	font-weight:normal;
	text-transform:uppercase;
	background-color:transparent;
	border:0;
	box-shadow:none;
}

.keyboardTable.dates td.header
{
	height:2.0rem;
	max-height:2.0rem;
	font-size:var(--textSizeSmall);
	font-weight:normal;
	color:#000000;
	background-color:transparent;
	border:0;
	box-shadow:none;
}

.keyboardTable.dates td.selected
{
	background-color:var(--primaryColor);
	border:0.2rem solid var(--gradientColor);
}

.keyboardTable.dates td.otherMonth
{
	background-color:var(--disabledGray);
}

.keyboardTable.dates td.today
{
	box-shadow:0 0 0 0.4rem #000000;
}

.keyboardTable td.done
{
	background-color:var(--primaryColor);
	border:0.2rem solid var(--gradientColor);
}
.keyboardTable td.none
{
	cursor:default;
	background-color:transparent;
	border:0;
	box-shadow:none;
}

.keyboardTable td.key:active, .keyboardTable td.done:active, .keyboardTable.dates td.date:active, 
.keyboardTable.dates td.month:active
{
	background-color:#dddddd;
	position:relative;
	top:0.2rem;
	left:0.1rem;
	box-shadow:none;
}

.keyboardTable td.sliderCell
{
	width:4rem;
	background-color:transparent;
	border:0;
	box-shadow:none;
	padding:0.3rem 0 0.3rem 0.7rem;
}

.editing .caret
{
	padding:1.0rem 0 1.0rem 0;
	outline:0.1rem solid #000000;
	animation:blinkingCaret 1s infinite;
}

@keyframes blinkingCaret
{
    0% { outline:0.1rem solid #000000; }
    49% { outline:0.1rem solid #000000; }
    60% { outline:0.1rem solid transparent; }
    99% { outline:0.1rem solid transparent;  }
    100% { outline:0.1rem solid #000000; }
}

.editing .caretInv
{
	padding:1rem 0 1rem 0;
	outline:0.1rem solid transparent;
	animation:blinkingCaretInv 1s infinite;
}

@keyframes blinkingCaretInv
{
    0% { outline:0.1rem solid transparent; }
    49% { outline:0.1rem solid transparent; }
    60% { outline:0.1rem solid #000000; }
    99% { outline:0.1rem solid #000000;  }
    100% { outline:0.1rem solid transparent; }
}

.editing .caretRange
{
	color:#ffffff;
	background-color:#000000;
	outline:0.3rem solid #000000;
}


.colorKeyboard
{
	display:flex;
	justify-content:flex-end;
	max-width:30rem;
	padding:1rem 1rem 1rem 1rem;
}

.colorKeyboard .button
{
	width:10rem;
	height:22rem;
	display:flex;
	margin:0 0 0 0;
	flex-direction:column;
	justify-content:flex-end;
	align-items:flex-start;
	font-size:2.0rem;
}

.sliderScale
{
	width:2rem;
	min-height:1rem;
	border-radius:1rem;
	border:0.2rem solid #666666;
	margin:0 0.5rem 0.2rem 1.5rem;
}

/****** MAIN PAGE *************************************************/

.mainPage
{
	display:block;
	position:absolute;
	z-index:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
	max-width:var(--maxPageWidth);
	background-color:#aaaaaa;
	overflow-y:scroll;
	overflow-x:hidden;
	overscroll-behavior:none;
	-webkit-overflow-scrolling:touch;
}

.mainPageBar
{
	overflow:hidden;
	height:5.5rem;
	min-height:5.5rem;
	max-height:5.5rem;
	max-width:var(--maxPageWidth);
	position:sticky;
	z-index:6;
	top:0;
	width:100%;
	background-color:var(--barColor);
	display:flex;
	justify-content:space-between;
	align-items:center;
	user-select:none;
}

.mainPageBar .iconButton
{
	width:7.5rem;
	height:5.5rem;
	flex-shrink:100;
}

.mainPageBar .iconButton.selected
{
	background-image:linear-gradient(to bottom, #ffffff 0%, #ffffff 8%, var(--barColor) 8%, var(--barColor) 100%);
}

.mainPageBar .iconButton img
{
	filter:invert(100%);
	width:3.65rem;
	height:3.65rem;
}

.mainPagePanel
{
	display:block;
	width:100%;
	min-height:100%;
	max-width:var(--maxPageWidth);
	background-color:var(--pageColor);
	padding:0rem 0 0 0;
}

.mainPagePanel .header
{
	font-family:'ChivoExtraBold'; 
	text-align:center;
	font-size:3.1rem;
	font-weight:bold;
	color:var(--headerTextColor);
	margin:3.5rem 2.0rem 1.5rem 2.0rem;
	line-height:1.3;
	user-select:none;
}

.mainPageText
{
	text-align:left;
	font-size:var(--textSize);
	font-weight:normal;
	color:#000000;
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
}



/****** START PAGE *************************************************/

.mainPagePanel .motto
{
	font-family:'Chivo'; 
	text-align:center;
	font-size:2.5rem;
	font-weight:normal;
	font-style:italic;
	color:var(--headerTextColor);
	margin:-1.3rem 2.0rem 1.5rem 2.0rem;
	line-height:1.3;
	user-select:none;
}

.mainPage .helpIcon img, .subPage .helpIcon img
{
	cursor:pointer;
	user-select:none;
	width:3.2rem;
	height:3.2rem;
	opacity:1;
	margin:-1rem 1rem 0 0;
	float:right;
	opacity:1;
}

.mainPage .mosaic
{
	display:flex;
	align-items:center;
	margin:0 0 0 0;
}

.mainPage .mosaicGrid
{
	display:grid;
	width:100%;
	max-width:var(--maxPageWidth);
	margin:0 1rem 0 1rem;
	grid-template-columns:repeat(6, 1fr);
	grid-template-rows:repeat(3, 1fr);
	grid-gap:0.7rem 0.7rem;
}

.mainPage .mosaicGrid div
{
	cursor:pointer;
	background-color:var(--primaryColor);
	border-radius:0.4rem;
	user-select:none;
	border:0.2rem solid #00000015;
}

.mainPage .mosaicGrid .item1 
{
	grid-area:1 / 1 / span 3 / span 3;
}

.mainPage .mosaicGrid .item2
{
	background-color:var(--rowColor);
	grid-area:2 / 5 / span 2 / span 2;
	transform:scaleX(-1);
}

.mainPage .mosaicGrid .item5, .mainPage .mosaicGrid .item6
{
	background-color:var(--rowColor);
	transform:scaleX(-1);
}

.mainPage .mosaicGrid .item3
{
	background-color:var(--primaryColor);
}

.mosaicImage
{
	width:100%;
	height:auto;
	object-fit:cover;
	margin:0 0 -0.6rem 0;
}


/****** SUB PAGE *************************************************/

.subPage
{
	display:block;
	position:absolute;
	z-index:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
	max-width:var(--maxPageWidth);
	background-color:#aaaaaa;
	overflow-y:scroll;
	overflow-x:hidden;
	overscroll-behavior:none;
	-webkit-overflow-scrolling:touch;
}

.subPageBar
{
	cursor:pointer;
	height:5.5rem;
	min-height:5.5rem;
	max-height:5.5rem;
	max-width:var(--maxPageWidth);
	position:sticky;
	z-index:5;
	top:0;
	width:100%;
	user-select:none;
	background-color:#000000;
	color:#FFFFFF;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.subPageBar .label
{
	color:#ffffff;
	font-size:2.5rem; /*var(--textSizeSection);*/
	font-weight:bold;
	/*text-transform:uppercase;*/
	flex-grow:1;
	text-align:left;
	line-height:2.5rem;		/* Prevents bad vertical centering */
 	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	padding:0.5rem 0.5rem 0.5rem 0;
}

.subPageBar .buttonRow
{
	flex-grow:0;
	display:flex;
	justify-content:flex-end;
	flex-direction:row;
	align-items:center;
}

.subPageBar .iconButton img
{
	width:3.65rem;
	height:3.65rem;
}

.subPagePanel
{
	display:block;
	width:100%;
	min-height:100%;
	background-color:var(--pageColor);
	padding:0 0 0 0;
}

.subPagePanel .header
{
	font-family:'ChivoExtraBold'; 
	text-align:center;
	font-size:3.1rem;
	font-weight:bold;
	color:var(--headerTextColor);
	margin:3.0rem 2.0rem 2.0rem 2.0rem;
	user-select:none;
}

.subPagePanel .stickyHeader
{
	font-family:'ChivoExtraBold';
	text-align:center;
	font-size:3.1rem;
	line-height:1.0;
	font-weight:bold;
	position:sticky;
	top:4.5rem;
	z-index:4;
	color:var(--headerTextColor);
	margin:0 0 1.0rem 0;
	padding:1.0rem 2.0rem 1.0rem 2.0rem;
}

.subPagePanel .header.editable
{
	background-color:#ffffff;
	border-radius:0.3rem;
	padding:0.7rem 0.5rem 0.7rem 0.5rem;
}

.subPagePanel .header.editable:focus
{
	outline:none;
}

.subPagePanel .subHeader
{
	font-family:'ChivoExtraBold';
	text-align:center;
	font-size:2.7rem;
	font-weight:bold;
	color:var(--headerTextColor);
	margin:0.5rem 1.0rem 1.5rem 1.0rem;
}

.subPagePanel .header ~ .subHeader
{
	margin:-1.0rem 1.0rem 1.5rem 1.0rem;
}

.subPagePanel .sectionHeader
{
	font-family:'ChivoExtraBold';
	font-size:2.7rem;
	margin:3.0rem 1.0rem 1.5rem 1.0rem;
	font-weight:bold;
	text-align:center;
	color:var(--headerTextColor);
	text-transform:lowercase; /* lowercase */
	user-select:none;
}

.subPagePanel .header + .sectionHeader, .subPagePanel .stickyHeader + .sectionHeader
{
	margin:1.0rem 1.0rem 1.5rem 1.0rem;
}

.subPagePanel .infoText
{
	color:var(--headerTextColor);
	text-align:center;
	font-size:var(--textSize);
	margin:0.5rem 2.0rem 1.5rem 2.0rem;
}

.subPagePanel .typeRow
{
	float:left;
}

.subPagePanel .typeRow > img
{
	cursor:pointer;
	width:4.2rem;
	height:4.2rem;
	margin:-1.0rem 1rem 0.5rem 1.0rem;
}

.subPagePanel .toolRow
{
	float:right;
}

.subPagePanel .toolRow > img
{
	cursor:pointer;
	width:4.2rem;
	height:4.2rem;
	margin:-1.0rem 1rem 0.5rem 1.0rem;
}

.subPagePanel .symbolRow
{
	float:right;
}

.subPagePanel .symbolRow > div
{
	color:#ffffff;
	width:2.8rem;
	min-width:2.8rem;
	max-width:2.8rem;
	height:2.8rem;
	min-height:2.8rem;
	max-height:2.8rem;
	font-weight:bold;
	font-size:2.7rem;
	padding:0.1rem 0.2rem 0.1rem 0.2rem;
	margin:-0.5rem 1.0rem 0.5rem 1rem;
	border-radius:0.4rem;
	display:flex;
	justify-content:center;
	align-items:center;
	cursor:pointer;
}

.subPagePanel .symbolRow > img
{
	cursor:pointer;
	width:4.2rem;
	height:4.2rem;
	margin:-0.8rem 1.0rem 0.5rem 1rem;
	opacity:0.5;
	filter:brightness(0.5);
}

/****** MENU *************************************************/

.menuPage
{
	position:absolute;
	z-index:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
	max-width:var(--maxPageWidth);
	background-color:var(--pageShadowColor);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
}

.menuPage:before {
  content:"";
  flex-grow:4;
}
.menuPage:after {
  content:"";
  flex-grow:6;
}

.menuPagePanel
{
	margin-right:-25rem;
	transition:margin-right 0.3s;
	min-width:20rem;
	max-width:25rem;
	background-color:var(--rowColor);
	border-radius:1.5rem 0 0 1.5rem;
	padding:1.0rem 1.0rem 0 1.0rem;
	/*border-left:1.0rem solid var(--primaryColor);*/
	overflow-y:auto;
	overflow-x:hidden;
}

.menuPageContent
{
	display:inline-block;		/* Can not be block, or bottom will overflow. */
	height:100%;
	width:100%;
	max-width:var(--maxPageWidth);
	background-color:var(--rowColor);
	padding:0;
	user-select:none;
}

.menuPageContent .buttonRowListItem, .menuPageContent .buttonRow
{
	margin:0 0 1.0rem 0;
}

.menuPageContent .button.methodIcon img
{
	width:3.2rem;
	height:3.2rem;
	margin:-0.3rem 1.0rem -0.3rem 0;
}

.menuPageContent .title
{
	text-align:center;
	font-size:var(--textSize);
	font-weight:bold;
	text-transform:uppercase;
	color:var(--textColor);
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
	/*overflow-wrap: break-word;*/
 	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.menuPageContent > .subtitle
{
	text-align:center;
	font-size:var(--textSize);
	color:#000000;
	margin:0rem 1.0rem 1.0rem 1.0rem;
}

.menuPageContent > .label
{
	text-align:left;
	font-size:var(--textSize);
	color:#000000;
	margin:1.5rem 1.0rem 0.5rem 1.0rem;
}

.menuPageContent > .text
{
	text-align:left;
	font-size:var(--textSize);
	color:#000000;
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
}

.menuPageContent .lineSpacer
{
	height:0.4rem;
	background-color:var(--pageColor);
	/*filter:brightness(80%);*/
	margin:1.0rem 1.0rem 0.8rem 1.0rem;
}

.menuPageContent .blankSpacer
{
	height:0.4rem;
	margin:1.2rem 1.0rem 1.0rem 1.0rem;
}

.menuPageContent .sectionSpacer
{
	height:1rem;
	margin:1.8rem -1rem 1.3rem -1rem;
	background-color:var(--primaryColor);
}

.menuPageContent .textBox
{
	border-radius:0.8rem;
	border:0;
	margin:0 0 1.0rem 0;
	background-color:var(--primaryColor);
	color:#000000;
	padding:0.6rem 1.0rem 0.6rem 1.0rem;
	font-size:var(--textSize);
	font-weight:bold;
	text-align:left;
}

.menuPageContent .textBox:focus
{
	outline:none;
}

.menuPageContent .controlRow
{
	margin:0 0 1.0rem 0;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.menuPageContent .controlRow .valueBox
{
	border-radius:0.8rem;
	border:0;
	width:12rem;
	margin:0 1.0rem 0 0;
	background-color:var(--primaryColor);
	color:#000000;
	padding:0.6rem 1.0rem 0.6rem 1.0rem;
	font-size:var(--textSize);
	font-weight:bold;
	text-align:left;
}

.menuPageContent .controlRow .valueBox::placeholder, .menuPageContent .controlRow .valueBox[readonly]
{
	color:#aaaaaa;
}
.menuPageContent .controlRow .valueBox:focus::placeholder
{
	color:var(--primaryColor);
}


/****** FORM PAGE *************************************************/

.formPage
{
	position:absolute;
	z-index:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
	max-width:var(--maxPageWidth);
	background-color:var(--pageShadowColor);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.formPage:before 
{
  content:"";
  flex-grow:2;
}

.formPage:after 
{
  content:"";
  flex-grow:8;
}

.formPagePanel
{
	width:85%;
	max-width:32rem;
	overflow:hidden;
	border-radius:1.5rem;
	background-color:#000000;
	overflow-y:auto;
}

.formPageContent
{
	display:inline-block;		/* Can not be block, or bottom will overflow. */
	height:100%;
	width:100%;
	max-width:var(--maxPageWidth);
	background-color:var(--pageColor);
	padding:0;
}

.formPageContent .buttonRowListItem, .formPageContent .buttonRow
{
	margin:0 0 1.0rem 0;
}

.formPageContent .button.methodIcon img
{
	width:3.2rem;
	height:3.2rem;
	margin:-0.3rem 1.0rem -0.3rem 0;
}

.formPageContent .title
{
	color:#000000;
	background-color:var(--primaryColor);
	border-bottom:0.2rem solid var(--gradientColor);
	background-size:40rem 10rem;
	font-size:var(--textSize);
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	padding:1.2rem 2.0rem 0.8rem 2.0rem;
	display:flex;
	justify-content:center;
	align-items:center;
	user-select:none;
}

.formPageContent .title img
{
	cursor:pointer;
	width:3.2rem;
	height:3.2rem;
	opacity:1;
	margin-left:0.5rem;
}

.formPageContent .nameValueControl
{
	margin:0.5rem 0 0.5rem 0;
}

.formPageContent .nameValueControl .nameValue
{
	background-color:var(--pageColor);
}

.formPageContent > .subtitle
{
	text-align:center;
	font-size:var(--textSize);
	color:var(--textColor);
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
}

.formPageContent > .label
{
	text-align:left;
	font-size:var(--textSize);
	color:var(--textColor);
	margin:1.3rem 1.0rem 0.7rem 1.5rem;
}

.formPageContent > .label.italic
{
	font-style:italic;
}

.formPageContent > .text
{
	text-align:left;
	font-size:var(--textSize);
	color:var(--textColor);
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
}

.formPageContent .blankSpacer
{
	height:0.4rem;
	margin:0.2rem 0rem 0.2rem 0rem;
	background-color:#ffffff;
}

.formPageContent .sectionSpacer
{
	height:1rem;
	margin:1.8rem -1rem 1.3rem -1rem;
	background-color:#cccccc;
	background-size:40rem 10rem;
}

.formPageContent .textBox
{
	border-radius:0.8rem;
	border:0;
	margin:0 0 1.0rem 0;
	background-color:var(--primaryColor);
	color:#000000;
	padding:0.6rem 1.0rem 0.6rem 1.0rem;
	font-size:var(--textSize);
	font-weight:bold;
	text-align:left;
}

.formPageContent .textBox:focus
{
	outline:none;
}

.formPageContent .formButtonRow
{
	margin:0rem 1rem 1.0rem 1rem;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}

.formPageContent .formButtonRow .button
{
	margin-top:1rem;
}

.formPageContent .submitRow
{
	background-color:var(--primaryColor);
	background-size:40rem 10rem;
	margin:1.0rem 0 0 0;
	padding:1.0rem 2.0rem 1.0rem 2.0rem;
	border-top:0.2rem solid var(--gradientColor);
}

.formPageContent .submitRow + .submitRow
{
	margin:-0.2rem 0 0 0;
	padding:0.2rem 2.0rem 1.0rem 2.0rem;
	border-top:none;
}

.formPageContent .submitRow .button .text
{
 	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.formPageContent .submitGroup
{
	max-height:20rem;
	overflow-y:auto;
}

.formPageContent .iconGrid
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	margin:1.0rem 0.5rem 1.0rem 0.5rem;
	overflow-y:auto;
}

.formPageContent .iconGrid > .iconCell
{
	cursor:pointer;
	color:#ffffff;
	background-color:#000000;
	width:2.8rem;
	height:2.8rem;
	min-width:2.8rem;
	max-width:2.8rem;
	min-height:2.8rem;
	max-height:2.8rem;
	font-weight:bold;
	font-size:2.7rem;
	padding:0.1rem 0.2rem 0.1rem 0.2rem;
	margin:0.3rem 0.3rem 0.3rem 0.3rem;
	border-radius:0.4rem;
	display:flex;
	justify-content:center;
	align-items:center;
}

.formPageContent .keywords
{
	display:flex;
	flex-wrap:wrap;
	cursor:default;
	font-size:1.5rem;
	font-style:normal;
	margin:1.0rem 1.5rem -0.4rem 1.0rem;
	padding:0.4rem 0.6rem 0.4rem 0.6rem;
	user-select:none;
}

.formPageContent .keywords > div
{
	cursor:pointer;
	display:inline-block;
	flex-shrink:0;
	color:#ffffff;
	height:2.8rem;
	min-height:2.8rem;
	max-height:2.8rem;
	min-width:2.8rem;
	font-size:1.2rem;
	font-weight:bold;
	transform:scale(1, 1.2);
	padding:0.1rem 0.2rem 0.0rem 0.2rem;
	margin:0.0rem 0.4rem 1.4rem 0.4rem;
	border-radius:0.4rem;
}

/****** STOPWATCH ********************************************/

.stopWatchDisplay
{
	cursor:pointer;
	background-color:#ffffff;
	border-radius:1.0rem;
	border:0.6rem solid var(--rowColor);
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
	display:flex;
	justify-content:center;
	align-items:center;
	user-select:none;
}

.stopWatchDisplay div
{
	font-family:Chivo;
	font-weight:normal;
	font-size:3rem;
	margin:-1.0rem 0rem -1.0rem 0rem;
}

.stopWatchContainer .buttonRowFill
{
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
}

.stopWatchContainer .buttonRowFill img
{
	margin:-0.3rem 0.5rem -0.2rem 0.5rem;
}

.lapsPanel
{
	max-height:40vh;
	overflow-x:hidden;
	overflow-y:auto;
}

.lapsTable
{
	width:100%;
	padding:1rem 1rem 1rem 1rem;
}

.lapsTable tr
{
	background-color:#ffffff;
}

.lapsTable tr.gray
{
	background-color:var(--pageColor);
}

.lapsTable td
{
	font-family:Chivo;
	padding:0rem 0.5rem 0rem 0.5rem;
	text-align:right;
}


/****** MESSAGE PAGE ********************************************/

.messagePage
{
	display:flex;
	position:absolute;
	z-index:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
	max-width:var(--maxPageWidth);
	background-color:var(--pageShadowColor);
	overflow:hidden;
	justify-content:center;
	align-items:center;
}

.messagePagePanel
{
	overflow:hidden;
	border-radius:1.5rem;
	border:0.4rem solid #ffffff;
	margin:4.0rem 4.0rem 4.0rem 4.0rem;
	padding:2.0rem 3.0rem 2.0rem 3.0rem;
	background-color:var(--primaryColor);
}

.messagePagePanel.flashing
{
	animation:blinkingText 1s infinite;
}

@keyframes blinkingText
{
    0% { background-color:var(--primaryColor); }
    49% { background-color:var(--primaryColor); }
    60% { background-color:#fff; }
    99% { background-color:#fff;  }
    100% { background-color:var(--primaryColor); }
}

.messagePageContent
{
	display:block;
	height:100%;
	width:100%;
	max-width:var(--maxPageWidth);
	color:var(--textColor);
	font-size:2.2rem;
	font-weight:bold;
	font-style:italic;
	text-align:center;
	line-height:1.4;
}


/****** DIALOG PAGE ********************************************/

.dialogPage
{
	position:absolute;
	z-index:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
	max-width:var(--maxPageWidth);
	display:flex;
	background-color:var(--pageShadowColor);
	overflow:hidden;
	justify-content:center;
	align-items:center;
}

.dialogPagePanel
{
	width:85%;
	max-width:35rem;
	overflow:hidden;
	border-radius:1.5rem;
	margin:1rem 0 1rem 0;
}

.dialogPageContent
{
	display:block;
	height:100%;
	width:100%;
	max-width:var(--maxPageWidth);
	max-height:90vh;
	overflow-y:auto;
	background-color:var(--pageColor);
}

.dialogHeader
{
	color:#000000;
	background-color:var(--primaryColor);
	border-bottom:0.2rem solid var(--gradientColor);
	font-size:var(--textSize);
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	padding:1.2rem 2.0rem 0.8rem 2.0rem;
}

.dialogText
{
	color:var(--textColor);
	font-size:var(--textSize);
	font-weight:normal;
	font-style:italic;
	text-align:center;
	padding:2.0rem 2.0rem 1.0rem 2.0rem;
	overflow-wrap:break-word;
}

.dialogText:empty
{
	display:none;
}

.dialogPageContent .buttonRow, .dialogPageContent .buttonRowCenter
{
	padding:2.0rem 2.0rem 2.0rem 2.0rem;
}

.dialogPageContent .button
{
	min-width:8.0rem;
}

.dialogPageContent .dialogInput
{
	border-radius:0.8rem;
	border:0;
	margin:0 2.0rem 1.0rem 2.0rem;
	background-color:#ffffff;
	color:#000000;
	padding:0.6rem 1.0rem 0.6rem 1.0rem;
	font-size:var(--textSize);
	font-weight:bold;
	text-align:left;
}

.dialogPageContent .dialogInput:focus
{
	outline:none;
}

.dialogPageContent .buttonRowFill
{
	padding:0rem 1rem 1rem 1rem;
}

.dialogPageContent .buttonRowFill:first-child
{
	padding:1rem 1rem 1rem 1rem;
}

.dialogPageContent .badge
{
	width:100%;
	max-width:350px;
}

.dialogPageContent .buttonContainer
{
	max-height:70vh;
	overflow-y:auto;
}

.dialogPage .previewImage
{
	display:block;
	max-width:100%;
	max-height:65vh;
	margin:0.5rem auto 0 auto;
}

.dialogPage .previewText
{
	width:90%;
	overflow:auto;
	max-width:90%;
	max-height:45vh;
	margin:0.5rem auto 0 auto;
	white-space:pre;
	font-family:monospace;
	font-style:normal;
	font-size:var(--textSize);
	background-color:#ffffff;
	padding:1rem 1rem 1rem 1rem;
}

.dialogText .qrCode
{
	width:70%;
	height:auto; 
	object-fit:cover;
	margin:0 0 1.0rem 1.0rem;
}

/****** MESSAGES *************************************************/

.messages
{
	border:0.5rem solid #C00000;
	border-radius:0.2rem;
	margin:0 1rem 1.5rem 1rem;
	padding:0rem 0rem 1rem 0rem;
	background-color:#FFF0F0;
	
}

.messages .messageHeader
{
	font-size:var(--textSizeSection);
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	margin:-0.1rem -0.1rem 1rem -0.1rem;
	background-color:#c00000;
	color:#ffffff;
}

.messages .messageItem
{
	font-size:var(--textSize);
	margin:0.5rem 0 0 0;
	padding:0rem 0.5rem 0.5rem 0.5rem;
}


/****** CALENDAR *************************************************/

.calendarHeading
{
	background-color:#000000;
	font-size:var(--textSizeSection);
	font-weight:normal;
	text-transform:uppercase;
	color:#ffffff;
	margin:2.0rem 0 0 0;
	padding:0.3rem 0 0.3rem 0;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.calendarHeading .title
{
	cursor:pointer;
	font-weight:normal;
	padding:0.5rem 0 0.5rem 0;
	flex-grow:1000;
	text-align:center;
}

.calendar > .keywords
{
	display:inline-block;
	cursor:default;
	background-color:#ffffff;
	font-size:1.5rem;
	font-style:normal;
	padding:0.4rem 0.6rem 0.4rem 0.6rem;
	border-radius:0 0 1.0rem 1.0rem;
	margin:0 1.5rem -0.4rem 1.0rem;
	user-select:none;
}

.calendar > .keywords:empty
{
	display:none;
	margin:0 0rem 0rem 0rem;
}

.calendar > .keywords > div
{
	display:inline-block;
	color:#ffffff;
	font-size:1.2rem;
	font-weight:bold;
	transform: scale(1, 1.2);
	padding:0.1rem 0.2rem 0.0rem 0.2rem;
	margin:0.2rem 0.0rem 0.2rem 0.0rem;
	border-radius:0.2rem;
}

.calendarTable
{
	table-layout:fixed;
	width:100%;
	margin:0 0 2.0rem 0;
	padding:0.2rem 0.2rem 0.2rem 0.2rem;
	border-spacing:0.6rem;
}

.calendarTable th
{
	font-family:"Chivo";
	text-align:center;
	border:0 solid #ffffff; 
	padding:0 0 0 0;
	margin:0 0.4rem 0 0.4rem;
	font-size:2.2rem;
	font-weight:bold;
	overflow:visible;
	white-space:nowrap;
	color:var(--headerTextColor);	
	user-select:none;
}
.calendarTable td
{
	cursor:pointer;
	text-align:center;
	vertical-align:top;
	padding:0 0 0 0;
	background-color:var(--buttonColor);
	border:0.2rem solid rgba(0, 0, 0, 0);
	border-radius:0.8rem 0.8rem 0.8rem 0.8rem;
	user-select:none;
}

.calendarTable th.weekHeader
{
	background-color:transparent;
	border:none;
	border-radius:none;
	box-shadow:none;
	width:6.5rem;
	height:5.5rem;
	text-transform:lowercase; /* lowercase */
	border:none; 
	padding:0 0.4rem 0 0;
	margin:0 0.4rem 0 0.4rem;
	overflow:visible;
	white-space:nowrap;
	user-select:none;
}

.calendarTable th.weekHeader .weekDay
{
	font-family:"Chivo";
	text-align:center;
	font-size:2.2rem;
	font-weight:bold;
	line-height:2.2rem;
	color:var(--headerTextColor);	
}

.calendarTable th.weekHeader .weekDate
{
	font-family:"Chivo";
	text-align:center;
	font-size:var(--textSize);
	font-weight:normal;
	color:var(--headerTextColor);	
}

.calendarTable td.otherMonth
{
	background-color:var(--disabledGray);
}
.calendarTable td.selected
{
	color:var(--textColor);
	background-color:var(--primaryColor);
	box-shadow:0rem 0rem 0rem 0.2rem var(--gradientColor);
}
.calendarTable td.today
{
	box-shadow:0 0 0 0.4rem #000000;
}
.calendarTable td.exclude
{
	visibility:hidden;
}
.calendarTable td .date
{
	padding:0.4rem 0.2rem 0 0.2rem;
	font-weight:normal;
	font-size:var(--textSize);
	user-select:none;
}

.calendarTable td .info
{
	width:100%;
	min-height:2.0rem;
	padding:0 0 0.2rem 0;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	user-select:none;
}

.calendarTable td .weekActivity
{
	padding:0.2rem 0.2rem 0rem 0.4rem;
	font-weight:normal;
	font-size:var(--textSize);
	user-select:none;
	text-align:left;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.calendarTable td .weekActivity div.marker
{
	display:inline-block;
	border-radius:0.5rem;
	padding:0 0.5rem 0 0.5rem;
	color:#FFFFFF;
}


.calendarTable .info > div
{
	color:#ffffff;
	width:var(--symbolSize);
	min-width:var(--symbolSize);
	max-width:var(--symbolSize);
	height:var(--symbolSize);
	min-height:var(--symbolSize);
	max-height:var(--symbolSize);
	font-weight:bold;
	font-size:var(--symbolFontSize);
	padding:0.2rem 0.2rem 0.0rem 0.2rem;
	margin:0.1rem 0.1rem 0.1rem 0.1rem;
	border-radius:0.4rem;
	display:flex;
	justify-content:center;
	align-items:center;
}

.dayBarPanel
{
	margin:0 0 0rem 0;
}

.dayBar
{
	overflow:hidden;
	height:4.5rem;
	min-height:4.5rem;
	max-height:4.5rem;
	max-width:var(--maxPageWidth);
	width:100%;
	background-color:var(--barColor);
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0 0 0 0;
	user-select:none;
}

.dayBarLabel
{
	cursor:pointer;
	color:var(--barTextColor);
	text-align:left;
	font-size:var(--textSizeSection);
	font-weight:normal;
	flex-grow:100;
	border-radius:0.8rem;
	white-space:nowrap;
 	overflow:hidden;
	text-overflow:ellipsis;
	text-transform:uppercase;
	padding:0.7rem 0.5rem 0.7rem 0.5rem;
	margin:0 0 0 -0.5rem;
}

.button.dayBarButton
{
	min-width:10rem;
	margin:0 1.0rem 0 0;
	background-color:var(--primaryColor);
	border:0.2rem solid var(--primaryColor);
}

.dayBarPanel > .keywords
{
	display:inline-block;
	background-color:#ffffff;
	font-size:var(--textSize);
	font-style:italic;
	padding:0.6rem 1.0rem 0.4rem 1.0rem;
	border-radius:0 0 1.0rem 1.0rem;
	margin:0 1.5rem 2rem 1.0rem;
	user-select:none;
}

.dayBarPanel > .keywords:empty
{
	visibility:hidden;					/* display:none will remove margin between sections */
	margin:0 0rem 0.7rem 0rem;
}

.sectionKeywords
{
	display:inline-block;
	background-color:#ffffff;
	font-size:var(--textSize);
	font-style:italic;
	padding:0.6rem 1.0rem 0.4rem 1.0rem;
	border-radius:0 0 1.0rem 1.0rem;
	margin:0 1.5rem 2rem 1.0rem;
	user-select:none;
}

.sectionKeywords:empty
{
	visibility:hidden;					/* display:none will remove margin between sections */
	margin:0 0rem 0.7rem 0rem;
}

/****** TEXTAREA CONTROL *********************/

.textAreaPanel ~ .section  
{
	margin:2.0rem 0 0 0;
}

.textArea
{
	margin:0 1.0rem 0 1.0rem;
	padding:0 1.0rem 0 1.0rem;
	min-height:5.0rem;
	background-color:var(--buttonColor);
	border-top:1.0rem solid var(--buttonColor);
	border-bottom:1.0rem solid var(--buttonColor);
	border-radius:0.5rem;
	font-size:var(--textSize) !important;
	overflow-wrap:break-word;
}

.textArea.editable
{
	border-top:1.0rem solid #ffffff;
	border-bottom:1.0rem solid #ffffff;
	min-height:8.0rem;
}

.formMargin
{
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
}

.formMarginTop
{
	margin:3.0rem 1.0rem 1.0rem 1.0rem;
}


.textArea::after 
{
	content:"";
	clear:both;
	display:table;
}


.textArea:focus
{
	outline:none;
}

.textArea .imageFull
{
	width:100%;
	height:auto; 
	object-fit:cover;
	margin:0 0 1.0rem 0;
	float:left;
}

.textArea .videoFull
{
	display:block;
	width:80%;
	/*border:3vh solid #000000;*/
	height:auto; 
	object-fit:cover;
	margin:0 0 1.0rem 0;
	/*float:left;*/
}

.textArea .imageLeft
{
	width:50%;
	height:auto; 
	object-fit:cover;
	margin:0 1.0rem 1.0rem 0;
	float:left;
}

.textArea .imageRight
{
	width:50%;
	height:auto; 
	object-fit:cover;
	margin:0 0 1.0rem 1.0rem;
	float:right;
}

.textArea .iconLeft
{
	width:3.5rem;
	height:auto; 
	object-fit:cover;
	margin:0 1.0rem 1.0rem 0;
	float:left;
}

.textArea .iconRight
{
	width:3.5rem;
	height:auto; 
	object-fit:cover;
	margin:0 0 1.0rem 1.0rem;
	float:right;
}

.textArea .sysIconLeft
{
	float:left;
	width:4.0rem;
	height:auto; 
	object-fit:cover;
	border-radius:0.4rem;
	background-color:var(--pageColor);
	margin:0 1.0rem 1.0rem 0;
	padding:0.5rem 0.5rem 0.5rem 0.5rem;
}

.textArea .sysIconRight
{
	float:right;
	width:4.0rem;
	height:auto; 
	object-fit:cover;
	border-radius:0.4rem;
	background-color:var(--pageColor);
	margin:0 0 1.0rem 1.0rem;
	padding:0.5rem 0.5rem 0.5rem 0.5rem;
}

.textArea .exeImageLeft
{
	width:50%;
	float:left;
	height:auto; 
	object-fit:cover;
	margin:0 1.0rem 1.0rem 0;
	background-color:var(--rowColor);
	border-radius:0.3rem;
	border:0.2rem solid #00000015;
}

.mainPageContent .textArea .exeImageRight
{
	width:50%;
	float:right;
	height:auto; 
	object-fit:cover;
	margin:0 0 1.0rem 1.0rem;
	background-color:var(--rowColor);
	border-radius:0.3rem;
	border:0.2rem solid #00000015;
}

.imageEmbedded
{
	width:20%;
}

.textAreaButtons img
{
	width:3.2rem;
	height:3.2rem;
	margin:-0.3rem 0rem -0.2rem 0rem;
}

div[contenteditable=true]:empty:not(:focus)::before
{
	content:attr(placeholder);
}
div[contenteditable=true]:empty
{
	color:#AAAAAA;
}

.textArea p
{
	font-size:var(--textSize);
}

.textArea li
{
	font-size:var(--textSize);
}

.textArea h1
{
	margin:3.0rem 0 0.5rem 0;
	font-size:2.7rem;
	line-height:1.1;
	font-weight:bold;
	display:table;   /* Makes a rectangular layout */
}

.textArea h1:first-child
{
	margin:1.0rem 0 0.5rem 0;
}

.textArea h2
{
	margin:2.0rem 0 0 0;
	font-size:2.3rem;
	line-height:1.1;
	font-weight:bold;
}

.textArea a
{
	cursor:pointer;
	text-decoration:underline;
	color:var(--darkColor);
	font-weight:bold;
}
.textArea a:visited
{
	text-decoration:underline;
	color:var(--darkColor);
	font-weight:bold;
}

.stickyTop
{
	overflow:hidden;
	height:5.0rem;
	min-height:5.0rem;
	max-height:5.0rem;
	max-width:var(--maxPageWidth);
	z-index:1;
	position:sticky;
	top:5.20rem;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0 1.0rem 0 1.0rem;
	margin:0 0 0 0;
	background-color:var(--barColor);
}

.textAreaButtons.stickyTop
{
	margin:0 0 1rem 0;
}

.observer
{
	height:0.1rem;
}

.stickyTop .button
{
	min-width:1.5rem;
}

.stickyTop .button:last-child
{
	margin:0 0 0 0;
}


/****** TEXTBOX CONTROL *********************************************/

.textboxControl
{
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

.textboxControl INPUT
{
	border-radius:0.5rem;
	flex-grow:100;
	border:0;
	margin:0 1.0rem 0 1.0rem;
	background-color:#FFFFFF;
	color:#000000;
	padding:0.6rem 0.6rem 0.6rem 0.6rem;
	font-size:var(--textSize);
}


/****** ADD BUTTON *********************************************/

.addActivityButton
{
	position:fixed;
	right:2.0rem;
	bottom:2.0rem;
	background-color:Transparent;
	border:0;
	width:7.5rem;
	height:7.5rem;
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
	align-items:center;
}

.addActivityButton img
{
	width:7.5rem;
	height:7.5rem;
}


/****** SECTION CONTROL ****************************************/

.section
{
	margin:0 0 2.0rem 0;
}

.section.link
{
	margin:0 0 0.5rem 0;
}

.section > .controlHeader
{
	cursor:pointer;
	background-color:var(--barColor);
	padding:0.5rem 0.5rem 0.5rem 0.5rem;
	margin:0 0 0 0;
	min-height:3.4rem;
	display:flex;
	justify-content:space-between;
	align-items:center;
	user-select:none;
}

.stickyLevel1
{
	position:sticky;
	top:5.2rem;			/* Should be 5.5rem, but that will show a glitch between sections */
	z-index:4;
}

.stickyLevel2
{
	position:sticky;
	top:9.4rem;			/* Should be 10.0rem, but that will show a glitch between sections */ 
	z-index:3;
}

.stickyLevel3
{
	position:sticky;
	top:13.6rem;		/* Should be 14.5rem, but that will show a glitch between sections */ 
	z-index:2;
}

.section > .controlHeader img
{
	width:3.5rem;
	height:3.5rem;
	flex-grow:0;
	flex-shrink:0;
}

.section > .controlHeader .mainButton
{
	background-color:Transparent;
	margin:0;
	padding:0;
	width:4.5rem;
	margin:0;
	flex-grow:100;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.section > .controlHeader .menuButton
{
	margin:0 -0.5rem 0 -0.5rem;
	width:4.5rem;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-grow:0;
	flex-shrink:0;
}
.section > .controlHeader .menuButton.disabled
{
	opacity:0;
}

.section > .controlHeader .text
{
	text-align:left;
	font-size:var(--textSizeSection);
	font-weight:normal;
	line-height:1.1;
	text-transform:uppercase;
	padding:0 0 0 0.5rem;
	color:#ffffff;
	flex-grow:100;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	/*display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;	*/
}

.section > .controlHeader .mainButton span
{
	/*font-weight:bold;*/
}

.section > .controlHeader .mainButton div.marker
{
	display:inline-block;
	font-weight:bold;
	border-radius:0.5rem;
	padding:0 0.5rem 0 0.5rem;
}

.section > .controlHeader .searchBox
{
	font-size:var(--textSizeSection);
	font-weight:normal;
	background-color:#ffffff;
	border:0;
	color:#000000;
	margin:0.3rem 1.0rem 0.3rem 1.0rem;
	padding:0.5rem 0.5rem 0.5rem 0.8rem;
	text-transform:none;
	border-radius:0.5rem;
	flex-grow:100;
}
.section > .controlHeader .searchBox::placeholder
{
	color:#000000;
}
.section > .controlHeader .searchBox:focus::placeholder
{
	color:#ffffff;
}

.section > .keywords
{
	display:inline-block;
	color:#000000;
	background-color:#FFFFFF;
	font-size:var(--textSize);
	font-style:italic;
	padding:0.6rem 1.0rem 0.4rem 1.0rem;
	border-radius:0 0 1.0rem 1.0rem;
	margin:0 1.5rem 0 1.0rem;
	user-select:none;
}

.section > .keywords:empty
{
	display:none;
}

.section > .sectionContent
{
	display:none;
	padding:0.5rem 0 1.0rem 0;
}

.section.noteSection > .sectionContent
{
	margin:1.0rem 0 1.0rem 0;
}

.titleSection.ingredients > .sectionContent
{
	margin:1.0rem 0 2.0rem 0;
}

.section .infoText
{
	color:var(--headerTextColor);
	text-align:center;
	font-size:var(--textSize);
	margin:2rem 2.0rem 2rem 2.0rem;
}

.titleSection .infoText
{
	color:var(--headerTextColor);
	text-align:center;
	font-size:var(--textSize);
	margin:1rem 2.0rem 2rem 2.0rem;
}

/****** SUB SECTION CONTROL ***************************************/

.subSection > .controlHeader
{
	cursor:pointer;
	background-color:var(--rowColor);
	padding:0.3rem 0.5rem 0.3rem 0.5rem;
	margin:1.0rem 0 0 0;
	min-height:3.4rem;
	display:flex;
	justify-content:space-between;
	align-items:center;
	user-select:none;
}

.subSection > .controlHeader img
{
	width:3.5rem;
	height:3.5rem;
	flex-grow:0;
	flex-shrink:0;
}

.subSection > .controlHeader .mainButton
{
	background-color:Transparent;
	margin:0;
	padding:0;
	width:4.5rem;
	margin:0;
	flex-grow:100;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.subSection > .controlHeader .menuButton
{
	margin:0 -0.5rem 0 -0.5rem;
	width:4.5rem;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-grow:0;
	flex-shrink:0;
}

.subSection > .controlHeader .menuButton.disabled
{
	opacity:0;
}

.subSection > .controlHeader .text
{
	text-align:left;
	font-size:var(--textSize);
	font-weight:bold;
	line-height:1.1;
	padding:0 0 0 0.5rem;
	color:var(--textColor);
	flex-grow:100;
	text-transform:none;
}

.subSection > .sectionContent
{
	display:none;
	padding:0.5rem 0 1.0rem 0;
}

.subSection > .sectionContent:empty  
{
	color:var(--headerTextColor);
	font-weight:bold;
	font-size:var(--textSize);
	padding:2.0rem 0 2.0rem 0;
	text-align:center;
}
.subSection > .sectionContent:empty::after  
{
	content:"empty folder";
}


/****** MINOR SECTION CONTROL ***************************************/

.minorSection > .controlHeader
{
	cursor:pointer;
	background-color:var(--pageColor);
	padding:0.3rem 0.5rem 0.3rem 0.5rem;
	margin:1.0rem 0 0 0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	user-select:none;
}

.minorSection > .controlHeader img
{
	width:3.5rem;
	height:3.5rem;
}

.minorSection > .controlHeader .mainButton
{
	background-color:Transparent;
	margin:0;
	padding:0;
	width:4.5rem;
	margin:0;
	flex-grow:100;
	display:flex;
	justify-content:center;
	align-items:center;
}

.minorSection > .controlHeader .menuButton
{
	margin:0 -0.5rem 0 -0.5rem;
	width:4.5rem;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-grow:0;
	flex-shrink:0;
}

.minorSection > .controlHeader .menuButton.disabled
{
	opacity:0;
}

.minorSection > .controlHeader .text
{
	text-align:left;
	font-size:var(--textSize);
	font-weight:normal;
	line-height:1.1;
	padding:0 0 0 0.5rem;
	color:var(--textColor);
	flex-grow:100;
	text-transform:none;
}

.minorSection > .sectionContent
{
	display:none;
	padding:0.5rem 0 1.0rem 0;
}

.minorSection > .sectionContent:empty  
{
	color:var(--headerTextColor);
	font-weight:bold;
	font-size:var(--textSize);
	padding:2.0rem 0 2.0rem 0;
	text-align:center;
}
.minorSection > .sectionContent:empty::after  
{
	content:"empty folder";
}


/****** TITLE SECTION CONTROL ***************************************/

.titleSection
{
	margin:1.0rem 0 0 0;
}

.titleSection > .controlHeader
{
	background-color:Transparent;
	padding:0.3rem 0.5rem 0.3rem 0.5rem;
	margin:3.0rem 0 1.0rem 0;
	min-height:3.4rem;
	display:flex;
	justify-content:space-between;
	align-items:center;
	user-select:none;
}

.titleSection > .controlHeader img
{
	width:3.5rem;
	height:3.5rem;
	opacity:1;
}

.titleSection > .controlHeader .text
{
	font-family:'ChivoExtraBold';
	font-size:2.7rem;
	font-weight:bold;
	padding:0 0 0 0.5rem;
	color:var(--headerTextColor);
	flex-grow:100;
	text-transform:lowercase; /* lowercase */
	text-align:center;
}

.titleSection > .controlHeader .menuButton
{
	cursor:pointer;
	margin:0 -0.5rem 0 -0.5rem;
	width:4.5rem;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-grow:0;
	flex-shrink:0;
}
.titleSection > .controlHeader .menuButton.disabled
{
	opacity:0;
}

.titleSection > .sectionContent
{
	display:none;
	padding:0 0 0 0;
	margin:0 0 0 0;
}

.titleSection .nameValueControl .diagram  
{
	margin-bottom:2rem;
}

/****** SECTION/SUBSCETION/MINORSECTION BUTTONS ************************/

.sectionContent .buttonRowListItem
{
	margin:0.7rem 1.0rem 0.7rem 1.0rem;
}

.sectionContent .button.main
{
	justify-content:flex-start;
	flex-grow:100;
}

.sectionContent .button.side
{
	border:0;
	width:5.0rem;
	height:3.2rem;
	border-radius:0.8rem;
	flex-grow:0;
	flex-shrink:0;
	justify-content:center;
}

.sectionContent .button.side img
{
	margin:-0.4rem -0.3rem -0.2rem -0.3rem;
	width:2.7rem;
	height:2.7rem;
}

.sectionContent .comment
{
	font-family:Chivo;
	text-align:center;
	font-size:2.4rem;
	font-weight:normal;
	color:var(--headerTextColor);
	margin:2.5rem 1.0rem 0.5rem 1.0rem;
	user-select:none;
}


/****** DIARY ACTIVITIES *************************************************/

.addActivityPartButtonRow
{
	padding:0 2.0rem 1.0rem 1.0rem;
}

.mainPageBottom .buttonRowRight
{
	padding:3.0rem 2.0rem 0 1.0rem;
}

.mainPageBottom .comment
{
	text-align:center;
	font-size:var(--textSize);
	font-weight:bold;
	color:var(--headerTextColor);
	margin:3.5rem 1.0rem 0.5rem 1.0rem;
}

.confirmButton
{
	padding:3rem 2rem 0 0;
}


/****** WORKOUT CONTROL *************************************************/

.exercisePanel
{
	margin:0.5rem 0 2.0rem 0;
}

.exercisePanel:after 
{
    content:'';
    display:block;
    clear:both;
}

.exerciseHeader
{
	cursor:pointer;
	background-color:var(--rowColor);
	margin:0 0 0 0;
	padding:0.5rem 0 0.5rem 0;
	color:#000000;
}
.exerciseHeader .labels
{
	display:flex;
	justify-content:space-between;
	align-items:center;
	user-select:none;
	min-height:3.5rem;
}

.exerciseHeader img
{
	width:3.5rem;
	height:3.5rem;
}

.exerciseHeader .text
{
	text-align:left;
	font-size:var(--textSize);
	font-weight:normal;
	line-height:1.1;
	flex-grow:10;
	padding:0 0 0 0;
	color:var(--textColor);
	flex-grow:10000;
}

.exercisePanel .exerciseImage
{
	cursor:pointer;
	width:30%;
	min-width:7rem;
	max-width:15rem;
	height:auto; 
	object-fit:cover;
	float:left;
	border:0.2rem solid var(--rowColor);
	background-color:var(--rowColor);
	border-radius:0 0 1.5rem 0;
	margin:0 1.0rem 1.0rem 0;
}

/* Used for PlanSetsInitialStatsForm */
.initialStrength .buttonRow			
{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	background-color:var(--rowColor);
	margin:1rem 0rem 1rem 0rem;
	padding:0.5rem 1rem 0.5rem 1rem;
	font-size:var(--textSize);
}

.initialStrength .exerciseImage
{
	width:40%;
	min-width:7rem;
	max-width:25rem;
}

.initialStrength .exercisePanel .nameValue
{
	padding: 0.2rem 0 0.2rem 0rem;
}

.initialStrength .nameValue .name
{
	padding:0;
}

.setsPanel
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
    align-items:flex-start;
    justify-content:left;
    margin:0.7rem 0 0 3.0rem;
    user-select:none;
}
.setsPanel .measureHeaders
{
	text-align:right;
	padding:0.2rem 0.5rem 0.3rem 0.5rem;
	margin:0.7rem 0.5rem 0.7rem -0.5rem;
	font-size:var(--textSize);
	font-weight:bold;
	color:var(--headerTextColor);
}
.setsPanel .measureHeaders .headerItem
{
	padding:0.2rem 0 0 0;
	border-bottom:0.2rem solid transparent;
	margin:0 0 0 0;
	min-height:2.3rem;
}
.setsPanel .measureHeaders .headerItem:last-child
{
	border-bottom:0;
}
.setsPanel .setButton
{
	cursor:pointer;
	text-align:center;
	min-width:2.6rem;
	border:0.2rem solid #ffffff;
	padding:0.2rem 0.5rem 0.3rem 0.5rem;
	border-radius:0.3rem;
	margin:0.5rem 1.0rem 0.5rem 0;
	font-size:var(--textSize);
	line-height:1.0;
	font-weight:bold;
	background-color:#ffffff;
}
.setsPanel .setButton.selected
{
	border:0.2rem solid var(--primaryColor);
	background-color:var(--primaryColor);
	overflow:hidden;
}
.setsPanel .setButton.editing
{
	border:0.2rem solid #000000;
}

.setsPanel .setButton.fillin
{
	border:0.2rem solid #ffffff;
	background-color:#dddddd;
}

.setsPanel .setButton.exceptional							/* Reached goal or personal record */
{
	background-color:var(--primaryColor);
	border:0.2rem solid var(--gradientColor);
}

.setsPanel .setButton .item
{
	display:flex;
	justify-content:center;
	padding:0.2rem 0 0rem 0;
	border-bottom:0.2rem solid rgba(0, 0, 0, 0.2);
	margin:0 0 0 0;
	min-height:2.3rem;
}
.setsPanel .setButton.fillin .item
{
	border-bottom:0.2rem solid #ffffff;
}
.setsPanel .setButton .item:last-child
{
	border-bottom:0;
}

.setsPanel .setButton .methodItems
{
	padding:0.4rem 0 0.1rem 0;
	min-height:2.0rem;
	display:flex;
	flex-direction:column;
	align-items:center;
	line-height:1.0;
	
}
.setsPanel .setButton.editing .methodItems.inverted
{
	color:#ffffff;
	background-color:#000000;	
	outline:0.3rem solid #000000;
}

.setsPanel .addButton
{
	cursor:pointer;
	width:4.0rem;
	height:4.0rem;
	margin:1.5rem 0.2rem 0.5rem 0.2rem;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.setsPanel .addButton:active
{
	background-color:rgba(0, 0, 0, 0.2);
}
.setsPanel .addButton img
{
	width:3.0rem;
	height:3.0rem;
}

.methodContainer > .button
{
	margin:0.5rem 0.5rem 0.5rem 0.5rem;
}

.methodContainer > .button > img
{
	height:3.2rem;
	width:3.2rem;
	margin:-0.8rem 0 -0.8rem 0;
}

.button.methodButton > img
{
	height:1.6rem;
	width:3.2rem;
}

.measures
{
	margin:1.5rem 0 1.5rem 0;
}

/****** EXERCISE PAGE *********************************************/

.thumbnailsContainer
{
	display:flex;
	flex-wrap:wrap; 
	justify-content:flex-start;
	align-items:flex-start;
	padding:0 0 0 0;
	margin:0 0 0.5rem 0;
}

.thumbnail
{
	cursor:pointer;
	width:30.5%;
	max-width:30.5%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:0 0 0 0;
	margin:0 0 0.5rem 0.4rem;
	border:0.3rem solid transparent;
	border-radius:0.3rem;
}
.thumbnail.selected
{
	background-color:#ffffff;
	border:0.3rem solid #ffffff;
}
.thumbnail img
{
	width:100%;
	height:auto; 
	object-fit:cover;
	background-color:var(--rowColor);
	border-radius:0.3rem;
}
.thumbnail div
{
	font-size:var(--textSizeSmall);
	overflow-wrap:anywhere;
	text-align:center;
	margin:0.5rem 0 0.5rem 0;
}


/****** MEAL CONTROL *********************************************/

.mealTable
{
	margin:0.5rem 0 2.0rem 0;
}


/****** NAME VALUE CONTROL *********************************************/

.nameValueContent:empty
{
	display:none;
}

.nameValue
{
	cursor:pointer;
	background-color:var(--rowColor);
	margin:0 0 0.5rem 0;
	padding:0.2rem 0 0.2rem 1.0rem;
	color:#000000;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	user-select:none;
}

.nameValueControl.nameTab .nameValue
{
	background-color:transparent;
	padding:0.2rem 0 0rem 1.0rem;
	margin:0 0 0rem 0;
	border-bottom:1rem solid #ffffff;
	font-weight:bold;
}

/*.nameValueControl.nameTab .nameValue
{
	margin:0 0 1rem 0;
}*/

.nameValueControl.minor .nameValue
{
	background-color:var(--rowColor);
}

.nameValueControl.selected .nameValue
{
	background-color:var(--primaryColor);
	border-left:0.8rem solid #000000;
	padding:0.2rem 0 0.2rem 0.2rem;
}

.nameValue .name
{
	text-align:left;
	font-size:var(--textSize);
	/*font-weight:normal;*/
	padding:0.2rem 0.3rem 0.2rem 0;
	color:var(--textColor);
	flex-grow:1000;
 	word-break:break-word;
}

.nameValueControl.disabled .name
{
	color:#999999;
	text-shadow:none;
}

.nameValue .valueBox
{
	min-height:2.8rem;
	min-width:3.0rem;
	border:0.2rem solid #ffffff;
	padding:0.2rem 0.8rem 0rem 0.8rem;
	border-radius:0.3rem;
	margin:0 1.0rem 0 0;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:var(--textSize);
	font-weight:normal;
	text-transform:none;
	user-select:none;
	background-color:#FFFFFF;
	white-space:nowrap;
	flex-shrink:0;
}

.nameValue .valueBox.wrapable
{
	white-space:normal;
	flex-grow:0;
	flex-shrink:1000;
	text-align:right;
}

.nameValueControl.nameTab .nameValue .valueBox
{
	border-radius:0.3rem 0.3rem 0 0;
	margin:0 1.0rem -0.2rem 0;
}

.nameValue .valueBox img
{
	width:3.2rem;
	height:3.2rem;
	margin:-0.5rem 0rem -0.3rem 0rem;
}

.nameValue .valueBox.textInput
{
	justify-content: flex-start;
	user-select:text;
	white-space:normal;
	overflow-wrap:break-word;
	word-break:break-word;
	flex-grow:1;
	text-align:left;
	max-width:calc(100% - 3rem);
}

.nameValue .valueBox.textInput:empty:not(:focus)::before
{
	content:attr(placeholder);
}
.nameValue .valueBox.textInput:empty
{
	color:#AAAAAA;
}

.nameValueControl .valueBox.editing
{
	border:0.2rem solid #000000;
}

.nameValueControl.disabled .valueBox
{
	visibility:hidden;
}

.nameValue .iconButton
{
	margin:0 0 0 -1.0rem;
	flex-shrink:0;
}
.nameValue .iconButton.disabled
{
	opacity:0;
}

.nameValue .valueBox.readonly
{
	border:0.2rem solid transparent;
	background-color:transparent;
	color:var(--textColor);
	font-weight:normal;
}

.primary > .nameValue
{
	/*padding:0.8rem 0.2rem 0.8rem 1rem;*/
	/*background-color:#cccccc !important;*/
	/*background-color:var(--rowColor);*/
	/*border-left:0.8rem solid #b0b0b0;*/
}

.primary > .nameValue .valueBox.selected
{
	border:0.2rem solid #ffffff;
	background-color:#ffffff;
}

.primary > .nameValue .name
{
	color:var(--textColor);
	font-weight:bold;
}

.primary > .nameValue .valueBox
{
	font-weight:bold;
}

.primary > .nameValue .valueBox.readonly
{
	color:var(--textColor);
}

/****** ACTIVITY DESCRIPTION AND SUMMARY *********************/

.fixedBottom
{
	overflow:hidden;
	height:5.0rem;
	min-height:5.0rem;
	max-height:5.0rem;
	width:100%;
	max-width:var(--maxPageWidth);
	z-index:5;
	position:fixed;
	bottom:0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0 0 0 0;
	background-color:var(--barColor);
}

.fixedBottom .button
{
	min-width:8.5rem;
	margin:0 1.0rem 0 1.0rem;
}

.stickyBottom
{
	overflow:hidden;
	height:5.0rem;
	min-height:5.0rem;
	max-height:5.0rem;
	max-width:var(--maxPageWidth);
	z-index:2;
	position:sticky;
	bottom:0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0 2.0rem 0 2.0rem;
	margin:3.0rem 0 0 0;
	transition:background-color 250ms linear;
}

.stickyBottom.isSticky
{
	transition:background-color 250ms linear;
	background-color:var(--barColor);
}

.observer
{
	height:0.1rem;
}

.stickyBottomLabel
{
	color:#ffffff; /*var(--primaryColor);*/
	text-align:left;
	font-size:var(--textSizeSection);
	font-weight:bold;
	flex-grow:100;
	border-radius:0.8rem;
	white-space:nowrap;
 	overflow:hidden;
	text-transform:uppercase;
	padding:0.7rem 0.5rem 0.7rem 0.5rem;
	margin:0 0 0 -0.5rem;
}

.stickyBottom .button
{
	min-width:7rem;
}

.stickyBottom .button:last-child
{
	margin:0 0 0 0;
}

.activityDescription
{
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
	padding:1.0rem 1.0rem 1.0rem 1.0rem;
	min-height:5.0rem;
	background-color:#ffffff;
	border-radius:0.3rem;
	font-size:var(--textSize);
}

.activityDescription:focus
{
	outline:none;
}


/****** SUMMARY TABLE ***********************************************/

.summaryTablePanel
{
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
}

.summaryTablePanel.loading
{
	animation:blinkingFrame 1s infinite;
}

.summaryTablePanel.loading .summaryTable
{
	opacity:0.3;
}

@keyframes blinkingFrame
{
    0% { outline:0.3rem solid #000000; }
    49% { outline:0.3rem solid #000000; }
    60% { outline:0.3rem solid transparent; }
    99% { outline:0.3rem solid transparent;  }
    100% { outline:0.3rem solid #000000; }
}

.summaryTable
{
	width:100%;
	max-width:100%;
	font-size:var(--textSize);
	user-select:none;
	border-collapse:collapse;
    background-color:var(--rowColor);
}
.summaryTable td
{
	padding:0.1rem 0.8rem 0.1rem 0.8rem;
	height:2.8rem;
	background-color:#FFFFFF;
	vertical-align:middle;
}

.summaryTable td:nth-child(1)
{
	word-break:break-word;
}

.summaryTable .left
{
	text-align:left;
}
.summaryTable .center
{
	text-align:center;
}
.summaryTable .right
{
	text-align:right;
}

.summaryTable .rightLeft
{
	text-align:right;
	padding:0.1rem 0rem 0.1rem 0.8rem;
}

.summaryTable th
{
	padding:0.6rem 0.8rem 0.4rem 0.8rem;
	font-weight:bold;
	color:var(--textColor);
	background-color:var(--rowColor);
	text-transform:uppercase;
	border-bottom:0.3rem solid #ffffff;
}

.summaryTable tr
{
	cursor:pointer;
}

.summaryTable tr.clickable
{
	cursor:pointer;
}

.summaryTable th:nth-child(1)
{
	text-align:left;
}

.summaryTable .subTitle td
{
	color:var(--textColor);
	background-color:var(--rowColor);
	font-weight:bold;
}

.summaryChart
{
	position:relative; 
	margin:0 1.0rem 2.0rem 1.0rem;
	padding:0 0 0 0; 
	background-color:#ffffff;
	border-radius:0.4rem;
	cursor:pointer;
}

.summaryComment
{
	font-size:var(--textSize);
	font-weight:normal;
	color:#000000;
	text-align:center;
	background-color:#ffffff;
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
	padding:1.0rem 0.5rem 1.0rem 0.5rem;
	border-radius:0.4rem;
}

.summaryTable .valueBar
{
	position:relative;
	display:inline-block;
	border:0.2rem solid #000000;
	width:4rem;
	background-color:#000000;
	padding:0;
	margin:0 0 -0.5rem 0;
}

.summaryTable .valueBar div
{
	height:2rem;
	background-color:var(--primaryColor);
	padding:0;
	margin:0;
}

.musclesChart
{
	position:relative;
	width:calc(100% - 2rem);
	background-color:#FFFFFF;
	border-radius:0.3rem;
	margin:0.5rem 1rem 0.5rem 1rem;
	cursor:pointer;
}

/**** SUMMARY TABLE PAGE **************************************************/

.summaryTableTitle
{
	background-color:var(--rowColor);
	margin:2.5rem 0 2.0rem 0;
}

.summaryTableTitle:after 
{
    content:'';
    display:block;
    clear:both;
}

.summaryTableTitle .itemImage
{
	width:30%;
	min-width:7.0rem;
	max-width:15rem;
	height:auto; 
	object-fit:cover;
	float:left;
	background-color:var(--rowColor);
	margin:0 1rem 0 0;
}

.summaryTableTitle .text
{
	color:var(--textColor);
	font-weight:normal;
	font-size:var(--textSize);
	padding:1rem 1rem 1rem 0rem;
	margin-left:2rem;
}

.summaryTableTitle .text ~ .text
{
	padding:0rem 1rem 1rem 0rem;
}


/****** SLIDER CONTROL ***********************************************/

.sliderV 
{
	width:3.5rem;
	height:100%;
	min-height:22rem;			/* Bug in Firefox: height:100% has no effect */
	margin:0 0 0 0;
	background-color:#ffffff;
	background-image:url("images/slider_background.webp");
	background-size: cover;
	border-radius:0.8rem;
	border:0.2rem solid #666666;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	user-select:none;
	vertical-align:middle;
}
.sliderV img
{
	width:3.0rem;
	height:3.0rem;
	opacity:0.3;
}
.sliderV.hold img
{
	opacity:1.0;
}

/**************** CHECKBOX CONTROL ***************************/

.checkbox
{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	margin:0 0 1.0rem 0;
	padding:0.5rem 0.5rem 0.5rem 0.5rem;
	background-color:var(--primaryColor);
	cursor:pointer;
}
.checkbox > .label
{
	font-size:var(--textSize);
	font-weight:bold;
	cursor:pointer;
}

/**** DIAGRAM **************************************************/

.diagram
{
	position:relative;
	margin:0 0 0 0;
}

.diagram.embedded
{
	margin:1.0rem 1.0rem 1.0rem 1.0rem;
	border-radius:0.3rem;
}

.exercisePanel + .diagram.embedded
{
	margin:-1.5rem 1rem 3rem 1rem;
}

/**** GOALS **************************************************/

.exerciseGoal			
{
	padding:0.5rem 1rem 0rem 0.5rem;
	min-height:7rem;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

.exerciseGoal .button.goal
{
	text-align:center;
	padding:1rem 0.5rem 1rem 0.5rem;
}
.exerciseGoal .button.achieved
{
	flex-direction:column;
	color:var(--textColor);
	background-color:var(--primaryColor);
	border-color:var(--gradientColor);
	text-align:center;
	font-weight:normal;
	padding:0.5rem 0.5rem 0.5rem 0.5rem;
}

.exerciseGoal .button img
{
	width:3.5rem;
	height:3.5rem;
	margin:0 auto 0 auto;
	filter:brightness(0);
}

.measureGoal
{
	display:flex;
	justify-content:flex-end;
	flex-direction:row;
	align-items:center;
	padding:0.5rem 4.5rem 2rem 0rem;
}

.measureGoal .button
{
	font-weight:normal;
	color:var(--textColor);
	background-color:var(--primaryColor);
	border-color:var(--primaryColor);
}

.measureGoal .button img
{
	width:3rem;
	height:3rem;
	margin:0 0.5rem 0 0;
}



/**** PROGRESS BAR **************************************************/

.progressBar
{
	position:relative;
	height:3rem;
	border:0.2rem solid #000000;
	border-radius:0.3rem;
	background-color:#ffffff;
	margin:0 1rem 0 1rem;
}

.progressBar .bar
{
	height:3rem;
	background-image:linear-gradient(135deg, var(--primaryColor) 25%, var(--gradientColor) 25%, 
		var(--gradientColor) 50%, var(--primaryColor) 50%, var(--primaryColor) 75%, var(--gradientColor) 75%);
	background-repeat:repeat;
	background-size:5rem 5rem;
	animation:bar-animation 3s linear infinite;
	display:flex;
	flex-direction:row-reverse;
	align-items:center;
	overflow:hidden;
}

.progressBar .bar .label
{
	font-weight:bold;
	float:right;
	color:#000000;
	font-size:var(--textSize);
	margin:0 0.5rem 0 0;
}

@keyframes bar-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

/**** PAYMENTS PAGE **************************************************/

.paymentButtons
{
	margin:0 1rem 0 1rem;
	padding:0.5rem 0.5rem 0.5rem 0.5rem;
	font-size:var(--textSize);
	text-align:center;
	background-color:var(--primaryColor);
	border-radius:0.5rem;
}