*{scrollbar-width: none;}
body{
	--leftOfRealBody:0;
	--widthOfRealBody:100%;
	left:0;
	top:0;
	margin:0;
	width:100%;
	height:100%;
	overflow-x:hidden;
}
.notification{
	z-index:1000;
	position:fixed;
	left:0;
	right:0;
	background-color:var(--transparenty);
	display:block;
}
.notification[active='true']{
}
.notification .notification-panel{
	
	top:-50px;
	color:var(--mainPrimaryDark);
	font-family: 'Raleway', serif;
        font-size: 20px;
		font-weight: 700;
	padding:10px;
	padding-bottom:8px;
	padding-left:0;
	padding-right:0;
	margin-left:2px;
	margin-right:2px;
	margin-bottom: 5px;
	position:absolute;
	background-color:var(--textOnPrimary);
	text-align:center;
	user-select: none; /* supported by Chrome and Opera */
	left:var(--leftOfRealBody);
	width:calc(var(--widthOfRealBody) - 4px);
	max-width:636px;
	transition-property:top;
	transition-duration:0.5s;
}
.notification[active='true'] .notification-panel{
	top:0px;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

body{
	height:100%;
	width:100%;
	background-color:var(--containerBackground);
	margin:0;
	padding:0;
	align:center;
	color:var(--text);
	transition-property:color,background-color;
	transition-duration:1s,0.5s;
}
a{
	color:var(--text);
}
#enBody{
	
}
.realBody{
	left:0;
	width:100%;
	
	max-width:640px;
	position:absolute;
}
.section{
	position:absolute;
	top:0;
	background-color:var(--mainBackgroundColor);
	left:0;
	top:0;
	width:100%;
	height:calc(100% + 48px);
	
}
.section[active="true"]{
	display:block;
	
	
}
.section[active="false"]{
	display:none;
	
	
}
.section-body{
	padding-top:46px;
	position:relative;
}
.section-title{
	color:var(--textOnPrimary);
	font-family: 'Raleway', serif;
        font-size: 20px;
		font-weight: 700;
	padding:10px;
	padding-left:42px;
	margin-bottom: 5px;
	position:fixed;
	top:0;
	width:calc(var(--widthOfRealBody) - 52px);
	background-color:var(--mainPrimaryDark);
	user-select: none; /* supported by Chrome and Opera */
	z-index:500;
	
}
.titleB{
	color:var(--textOnPrimary);
	height:44px;
	padding:0;
	position:fixed;
	top:0;
	width:var(--widthOfRealBody);
	background-color:var(--mainPrimaryDark);
	user-select: none; /* supported by Chrome and Opera */
	z-index:505;
}
.title-content{
color:var(--textOnPrimary);
font-family: 'Raleway', serif;
font-size: 20px;
font-weight: 700;
position:absolute;

padding:10px;
padding-bottom:7px;
left:40px;
padding-left: 4px;
margin-bottom: 5px;
position: relative;
top: 0;
background-color: var(--transparent);
user-select: none;
overflow:hidden;
height:18px; 
   width: calc(var(--widthOfRealBody) - 134px);
}
.section-description{
	font-family: 'Raleway', serif;
        font-size: 15px;
		font-weight: 700;
	padding-bottom: 15px;
	border-bottom:1px solid var(--textSecond);
	border-image:linear-gradient(to right,var(--gradientLeft), var(--mainSecondColor)) 100 stretch; 
	margin-bottom : 15px;
	user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   left:42px;
	top:20%;
	position:relative;
	width:calc(100% - 84px);
}
.question{
	margin-bottom : 15px;
	border:0;
}
.question-title{
	color:var(--text);
	margin-left:2px;
	font-family: 'Raleway', serif;
        font-size: 20px;
		font-weight: 900;
		user-select: none; /* supported by Chrome and Opera */
  
}
.question-description{
	color:var(--text);
	font-family: 'Raleway', serif;
        font-size: 14px;
		font-weight: 500;
		user-select: none; /* supported by Chrome and Opera */
  padding-top:2px;
 
}
.question-input{
	background-color:var(--mainBackgroundColor);
	border: 1px solid var(--mainSecondColor);
	width:calc(100% - 28px);
	resize: none;
	color:var(--textSecond);
	font-family: 'Raleway', serif;
        font-size: 12px;
		font-weight: 700;
		border-radius:0;
		caret-color: var(--gradientRight);
}
.question-options{
	
	width:calc(100%);
	
		caret-color: var(--gradientRight);
		padding-top:6px;
}
.question-href{
	

	font-family: 'Raleway', serif;
        font-size: 20px;
		font-weight: 900;
	

}
.question-href:hover{
	border-bottom: 1px solid #000;
	cursor:pointer;
}
.question-input::placeholder{
	color:var(--textThird);
	opacity: 1;
	font-family: 'Raleway', serif;
        font-size: 12px;
		font-weight: 600;
}

.question-input:focus::placeholder{
	color:var(--textThirdLight);
	
}

.question-input[type="checkbox"]{
	background-color:var(--mainBackgroundColor);
	border: 1px solid var(--mainSecondColor);;
	width:12px;
	color:#000;
	font-family: 'Raleway', serif;
        font-size: 12px;
		font-weight: 700;
		
}
.question .question-warning{
	display:none;
}
.question[correct="false"] .question-warning{
	color:var(--gradientRight);
	padding:2px;
	display:block;
	font-family: 'Raleway', serif;
        font-size: 10px;
		font-weight: 700;
		
}
.question-image{
	margin-right:12px;
	padding-top:4px;
}
.question-image img {
	width: calc(100%);
	filter:invert(var(--filter)) hue-rotate(130deg);
}

.section-data{
	padding-bottom: 15px;
	border-bottom:1px solid #000;
	border-image:linear-gradient(to right,var(--gradientLeft), var(--mainSecondColor)) 100 stretch; 
	margin-bottom: 15px;
	left:42px;
	top:20%;
	position:relative;
	width:calc(100% - 84px);
	
}
.section-data-full{
	padding-bottom: 15px;
	border-bottom:1px solid #000;
	border-image:linear-gradient(to right,var(--gradientLeft), var(--mainSecondColor)) 100 stretch; 
	margin-bottom: 15px;
	left:0px;
	top:20%;
	position:relative;
	width:100%;
	
}

body[value='fix'] .button-container{
	position: fixed;
	bottom: 0px;
	width: calc(var(--widthOfRealBody) - 2px);
	background-color: var(--mainBackgroundColor);
	border: solid 1px var(--mainPrimaryDark);
	height: 43px;
	padding-top: 0;
	border-bottom: 0;
}
body[value='fix'] .section-buttons{
	color:var(--text);
	position:relative;
	height:32px;
	left:42px;
	top:0px;
	margin-top:5px;
	margin-bottom:5px;
	width:calc(100% - 84px);
}


.section-buttons{
	color:var(--text);
	position:relative;
	padding-bottom:14px;
	height:32px;
	left:42px;
	
	width:calc(100% - 84px);
}
.title-element{
	color:white;
}
.header-icon{
filter:invert(var(--filter));
}
.section-button{
	user-select: none;
	cursor: pointer;
	font-family: 'Raleway', serif;
	padding:4px;
        font-size: 20px;
		font-weight: 900;
		background-color:var(--mainBackgroundColor);
		border:0;
		margin:0;
		color:var(--text);
	transition-property:margin;
  transition-duration:1s;
}
.section-button:hover{
	border:1px solid var(--text);
	padding:3px;
	
}
body[value='fix'] .section-button[required="true"]{
  display:none;
 
}
body[value='fix'] .section-button[required="true"]:hover{
	border:0px solid var(--text);
	padding:4px;
	
}
.button-icon{
	
}
.right-button .button-icon{
	overflow:hidden;
	height:24px;
	position:absolute;
	display:block;
	top:4px;
	right:-26px;
	width:0;
	font-size:0px;
	margin-top:12px;
	color:var(--text);
transition-property:width,margin-top,font-size;
  transition-duration:0.25s;
}

.right-button:hover .button-icon{
	width:24px;
	font-size:24px;
	display:block;
	margin-top:0px;
	height:24px;
	top:3px;
	
}
.left-button .button-icon{

	height:24px;
	position:absolute;
	display:block;
	top:4px;
	left:-26px;
	width:0;
	font-size:0px;
	margin-top:12px;
	color:var(--text);
 transition-property:width,margin-top,font-size;
  transition-duration:0.25s;
}
.left-button:hover .button-icon{
	width:24px;
	font-size:24px;
	display:block;
	margin-top:0px;
	height:24px;
	top:3px;
}
.section-button .button-text{
	width:24px;
	align:left;
	bottom:0;
	display:inline;
	position:absolute;
}
.right-button-inline .button-icon{
	overflow:hidden;
	height:24px;
	position:absolute;
	display:block;
	top:4px;
	right:-26px;
	width:0;
	font-size:0px;
	margin-top:12px;
	color:var(--text);
transition-property:width,margin-top,font-size;
  transition-duration:0.25s;
}
.right-button-inline:hover .button-icon{
	width:24px;
	font-size:24px;
	display:block;
	margin-top:0px;
	height:24px;
	top:3px;
	
}
.left-button{
	position:absolute;
	left:0;
}
.right-button{
	position:absolute;
	right:0;
}
.right-button-inline{
	position:relative;
	
	right:0;
}
.header{
	color:var(--text);
	width:100%;
	margin:0;
	background-color:var(--mainBackgroundColor);
	margin-bottom:16px;
}
.header img{
	left:22.5%;
	top:40%;
	
	width:352;
	position:relative;
}
.switch-button{
	position: absolute;
	top: 2px;
	right: 42px;
	background-color: transparent;
	border-radius: 50%;
	padding: 8px;
	cursor: pointer;
	z-index:510;
}

body .switch#moon{
	display:none;
}
body .switch#sun{
	display:block;
}
body[styleType='light'] .switch#moon{
	display:block;
}
body[styleType='light'] .switch#sun{
	display:none;
}
.dialog{
	position:fixed;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:500;
	cursor: progress;
}

body[state='loading'] #communicate-dialog{
	display:block;
}
body[state='loading'] .section{
	filter: grayscale(100%);
}
.switch-button:hover{
	position: absolute;
	top: 2px;
	right: 42px;
	background-image:radial-gradient(circle, var(--gradientRight) 100%,var(--transparenty) 0%);
	
	border-radius: 50%;
	padding: 8px;
}
.menu-bar{
	position: absolute;
	top: 1px;
	right: 0px;
	background-color: transparent;
	width:42px;
	cursor: pointer;
	z-index:200;
	overflow:hidden;
	height:42px;
	transition-property:height;
  transition-duration:0.25s;
	
}
.menu-bar:hover {
	height:86px;
	
	
}
.vertical-bar{
	position:absolute;
	height:84px;
	left:0px;
	top:40px;
	width:42px;
	background-color:transparent;
	z-index:150;
	display:block;
	background-color:var(--mainPrimaryDark);
	user-select: none; /* supported by Chrome and Opera */
	
}
.menu-bar:hover .vertical-bar{
	display:block;
}
.menu-button{
	position: absolute;
	top: 2px;
	left: 1px;
	background-color: transparent;
	border-radius: 20px;
	padding: 8px;
	cursor: pointer;
	z-index:510;
	
	transition-property:border-radius;
  transition-duration:0.25s;
  transition:z-index 0s linear 0.25s;
}
.menu-button:hover{
	background-image:radial-gradient(circle, var(--gradientRight) 100%,var(--transparenty) 0%);
	content:'menu_open';
}
.menu-button[state='open']{
	background-image:radial-gradient(circle, var(--gradientRight) 100%,var(--transparenty) 0%);
	border-radius: 20px;
	z-index:610;
	transition:z-index 0s linear 0s;
}
.menu-button[state='open']:hover{
	background-image:radial-gradient(circle, var(--mainPrimaryDark) 100%,var(--transparenty) 0%);
	border-radius: 20px;
	padding: 7px;
	top:3px;
	left:2px;
	z-index:610;
	
}
.menu-page{
	visibility:hidden;
	position: absolute;
	top: 2px;
	left: 1px;
	border-radius: 20px;
	padding: 8px;
	padding-bottom:9px;
	z-index:600;
	background-color:var(--gradientRight);
	height:24px;
	width:24px;
	transition:width 0.25s linear 0s,visibility 0s linear 0.25s;
	
	overflow:hidden;
}
.menu-page[state='open']{
	width:calc(100% - 18px);
	border-radius: 0px;
	visibility:visible;
	transition:width 0.25s linear 0s,visibility 0.25s linear 0s;
}
.menu-page[state='edit']{
	transition:width 0s linear 0s,visibility 0s linear 0s;
	width:calc(100% - 18px);
	border-radius: 0px;
	visibility:hidden;
	transition:width 0s linear 0s,visibility 0s linear 0s;
}
.menu-page .menu-content{
color:var(--gradientLeft);
font-family: 'Raleway', serif;
font-size: 20px;
font-weight: 700;
position:absolute;
height:20px;
padding: 0px;
padding-bottom:6px;
left:40px;
padding-left: 2px;
margin-bottom: 5px;
position: relative;
top: 0;
background-color: var(--gradientRight);
user-select: none;
overflow:hidden;
}
.menu-page[state='open'] .menu-content{
	overflow:hidden;
}
.menu-item{
	float:left;
	cursor: pointer;
	margin-right:24px;
}
.menu-item[state='active']{
	border-bottom:2px solid var(--mainPrimaryDark);
}
.menu-active-bar{
	position:absolute;
	background-color:var(--mainPrimaryDark);
	width:80px;
	height:2px;
	top:24px;
	transition:width 0.20s  cubic-bezier(.39,.58,.57,1) 0s,left 0.20s  cubic-bezier(1,0,0,1) 0s;
}
.help-button{
	position: absolute;
	top: 2px;
	right: 1px;
	background-color: transparent;
	border-radius: 50%;
	padding: 8px;
	cursor: pointer;
	z-index:200;
}
.help-button:hover{
	position: absolute;
	top: 2px;
	right: 1px;
	background-image:radial-gradient(circle, var(--gradientRight) 100%,var(--transparenty) 0%);
	
	border-radius: 50%;
	padding: 8px;
}
.vertical-button{
	position: relative;
	
	top: 2px;
	right: 1px;
	left:1px;
	padding:8px;
	z-index:200;
}
.vertical-button:hover{
	border-radius: 50%;
	background-image:radial-gradient(circle, var(--textSecond) 100%,var(--transparenty) 0%);
}
.menu-bar:hover .menu-button{
	position: absolute;
	top: 0px;
	right: 0px;
	background-image:radial-gradient(circle, var(--gradientRight) 100%,var(--transparenty) 0%);
	
	border-radius: 50%;
	padding: 8px;
}


.container {
  display: block;
  position: relative;
  padding-left: 35px;
  padding-top:5px;
  height:24px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: 'Raleway', serif;
        font-size: 12px;
		font-weight: 600;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  left:0;
  top:0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: var(--mainBackgroundColor);
  border: solid 1px var(--text);
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: var(--mainBackgroundColor);
  border: solid 1px var(--text);
}
.container[type='radio'] .checkmark {
	border-radius:6px;
}
.checkmark.char {
  position: absolute;
  top: 0;
  left: 0;
  padding:6px;
  height: 12px;
  width: 12px;
font-size:12px; 
 text-align:center;
  background-color: var(--mainBackgroundColor);
  border: solid 1px var(--text);
   font-weight:500;
}
/* On mouse-over, add a grey background color */

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
	color:var(--mainBackgroundColor);
  background-color: var(--text);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}
 .container input:checked ~ .checkmark.char:after {
  display: none;
}
/* Style the checkmark/indicator */
.container[type='checkbox'] .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--mainBackgroundColor);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.container[type='radio'] .checkmark:after {
	top: 6px;
	left: 6px;
	width: 12px;
	height: 12px;
	border-radius:3px;
	background-color:var(--mainBackgroundColor);
}

.container input:checked ~ .checkmark.char {
		position: absolute;
	  top: 0;
	  left: 0;
	  padding:5px;
	  height: 14px;
	  width: 14px;
	  font-size:14px;
	  text-align:center;
	  font-weight:900;
}
.container .checkmark.char:after {
	 top:0;
	 left:0;
	 width:0;
	 height:0;
	 overflow:hidden;
	display:none;
}
.virtual{
	display:none;
}
.progressBar{
	width:var(--widthOfRealBody);
	left:var(--leftOfRealBody);
	height:2px;
	position:fixed;
	top:0px;
	background-color:var(--mainPrimaryDark);
	border:0;
	z-index:530;
}
@keyframes bar-loading {
  0% {left: 0%;background-position: 0 0;}
  50% {left:75%;background-position: 100% 0;}
  100% {left:0;background-position: 0 0;}
}
@keyframes animate-icon {
	25%{translateY(100px);}
  50%{transform: rotate(15deg)translateY(-1px);}
  70%{transform: rotate(-15deg)translateY(-1px);}
  100%{transform: rotate(0);}
}
.progressBar .bar{
	width:0;
	background-image:linear-gradient(to right,var(--gradientLeft), var(--gradientRight),var(--gradientLeft));
	background-size:var(--widthOfRealBody) 2px;
	height:2px;
	position:relative;
	left:0;
	top:0;
	
	
	
}

body[state='sectionChange'] .progressBar .bar{
	transition-property:width,left;
	transition-duration:0.5s,0.5s;
	transition-timing-function: ease-in-out;
}
.progressBar[state='loading'] .bar{
	position:relative;
	width:25% !important;
	background-size: 400% 100%;
	animation-name: bar-loading;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate ;
  animation-timing-function: cubic-bezier(1,0,0,1);
  animation-fill-mode: both;
  
}
.danger{
	color:var(--danger);
}
.danger .button-icon{
	fill:var(--danger);
}
.material-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
user-select: none;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
.question-body-elem{
	margin-left:12px;
	margin-right:12px;
}
.article-title{
	text-indent:38px;
	color:var(--text);
	margin:8px;
	margin-top:20px;
	line-height:32px;
	font-family: 'Raleway', serif;
        font-size: 26px;
		font-weight: 900;
		user-select: none; /* supported by Chrome and Opera */
}
.article{
	padding-bottom:24px;
	padding-top:12px;
	border-bottom:solid 2px var(--textOnPrimary);
}
.article-title b {
	color:var(--textSecond);
	
}


.article-title key {
	color:var(--gradientRight);
}
.article-title .icon {
	text-indent:0px;
	padding: 4px 9px;
	height:24px;
	display:block;
	width:22px;
	position:absolute;
	left:0px;
}
.article-giga{
	line-height:42px;
	color:var(--text);
	text-indent:38px;
	
	margin:8px;
	
	font-family: 'Raleway', serif;
        font-size: 36px;
		font-weight: 900;
		user-select: none; /* supported by Chrome and Opera */
}
.article-giga b {
	color:var(--textSecond);
}
.article-giga key {
	color:var(--gradientRight);
}
.article-giga .icon {
	text-indent:0px;
	padding: 9px 9px;
	height:24px;
	display:block;
	width:22px;
	position:absolute;
	left:0px;
}
.article-description{
	color:var(--text);
	margin-left:8px;
	margin-right:8px;
	margin-top:12px;
	margin-bottom:6px;
	font-family: 'Raleway', serif;
	font-style: italic;
        font-size: 22px;
		font-weight: 100;
		user-select: none; /* supported by Chrome and Opera */
}
.article-description b {
	
	font-weight: 500;
}
.article-description key{
	color:var(--gradientRight);
}
.article-description .icon {
	padding: 3px 9px;
	height:24px;
	display:block;
	width:22px;
	position:absolute;
	left:0px;
}
.article-paragraph{
	
	color: var(--text);
	font-family: 'Raleway', serif;
	font-size: 18px;
	font-weight: 100;
	user-select: none;
	padding-top: 2px;
	margin:8px;
}
.article-image{
	width:var(--widthOfRealBody);
	padding-top:4px;
	margin:8px 0;
}
.article-image img {
	width: calc(100%);
	display:block;
}
.article-image-description{
	margin-top:0;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:42px;
	border-left:solid 2px var(--text);
	color: var(--text);
	font-family: 'Raleway', serif;
	font-size: 14px;
	font-weight: 900;
	user-select: none;
}
.article-subhead{
	color:var(--text);
	margin:8px;
	margin-top:20px;
	line-height:30px;
	font-family: 'Raleway', serif;
        font-size: 26px;
		font-weight: 900;
		user-select: none; /* supported by Chrome and Opera */
}
.article-subhead b {
	color:var(--textSecond);
	
}
.article-subhead key {
	color:var(--gradientRight);
}
.article-line{
	margin:44px;
	border-bottom:solid 2px var(--text);
	width:var()
}
.article a{
	text-decoration: none;
	color:var(--mainSecondColor);
}
.article-blockquote-quote{
	margin-top:0;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:42px;
	border-left:solid 2px var(--text);
	color: var(--text);
	font-family: 'Raleway', serif;
	font-size: 18px; 
	font-weight: 500;
	user-select: none;
}
.article-blockquote-description{
	color: var(--text);
	font-family: 'Raleway', serif;
	font-size: 14px;
	font-weight: 900;
	user-select: none;
	text-align:right;
	padding-left:2px;
	padding-right:2px;
}
@media only screen and (min-width: 640px) {
body{
	--leftOfRealBody:calc(50% - 320px);
	--widthOfRealBody:640px;
}
.realBody{
	background-color:var(--mainBackgroundColor);
	left:calc(50% - 320px);
	width:100%;
	max-width:640px;
}
}