/* Base styles */

html, body, button, input, textarea, select
{
	font-family : Arial, Helvetica;
	font-size   : 20px;
}

html, body
{
	-webkit-tap-highlight-color : transparent;
}

body
{
	/* Disables "double tap to zoom in" on mobile devices. */
	/* https://stackoverflow.com/questions/46167604/iphone-html-disable-double-tap-to-zoom */
	touch-action: manipulation;
}

pre
{
	white-space: pre-wrap !important;
	word-wrap: break-word !important;
}

/* Page style */

body
{
	margin: 0;
	padding: 40px;
}

body > form
{
	margin-top: 2.4em;
}

h2.heading
{
	margin-top: 30px;
	padding-top: 30px;
	margin-bottom: 30px;
	font-size: 125%;
}

ul.list li
{
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
	line-height: 1.4em;
}

code.colored
{
	color : #c92c2c;
}

a
{
	text-decoration: none;
	color: #0093C4;
}

a:hover
{
	text-decoration: underline;
}

a.main
{
	display: block;
	font-size: 125%;
}

p
{
	margin-top: 10px;
	margin-bottom: 40px;
	line-height: 1.45;
}

.country-icon
{
	width  : 1em;
	height : 0.75em;
	border : 1px solid #5f5f5f;
}

.title-anchor
{
	color: inherit;
	outline: none;
}

.title-anchor:hover
{
	text-decoration: none;
}

.column-width
{
	width : 20rem;
	max-width : 100%;
}

.submit-form
{
	margin-top: calc(0.3rem * 3);
}

pre
{
	border: 1px solid rgba(0, 0, 0, 0.03);
}

.table-of-contents
{
	margin-top: calc(0.3rem * 9);
	margin-bottom: calc(0.3rem * 9);
}

.sidenote
{
	line-height: 1.7em;
	/*color : #7f7f7f;*/
}

.new-message-notification
{
	width         : 100%;
	height        : 100%;
	display       : flex;
	align-items   : center;
	padding       : calc(0.3rem * 3);
}

.new-message-notification__user-picture
{
	width         : calc(0.3rem * 14);
	height        : calc(0.3rem * 14);
	border-radius : 50%;
	border        : 1px solid rgba(255,255,255,0.5);
}

.new-message-notification__text
{
	flex          : auto;
	padding-left  : calc(0.3rem * 4);
	padding-right : calc(0.3rem * 3);
	line-height   : 1.35em;
}

.new-message-notification__close
{
	background : none;
	border     : none;
	color      : white;
	cursor     : pointer;
	outline    : none;
	color : #03b2cb;
}

.new-message-notification__close:active
{
	color : #2bd7f0;
}

.rrui__snackbar--new-message-notification
{
	padding : 0;
}

/* Responsive */
@media (max-width: 720px)
{
	body
	{
		margin: 0;
		padding: calc(0.3rem * 4);
	}

	h2.heading
	{
		margin-top: 40px;
		margin-bottom: 15px;
	}

	html, body, button, input, textarea, select
	{
		/* The font size should be 16px minimum */
		/* so that mobile browsers don't zoom on input focus. */
		/* https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone */
		font-size   : 16px;
	}

	.submit-form
	{
		margin-top: calc(0.3rem * 5);
	}

	.header
	{
		padding-top: 0.6em;
		margin-left: 2.0em;
	}
}

.slideout-menu
{
	background-color: transparent;
}

.slideout-menu .rrui__list__item
{
	color: white;
}

.slideout-menu .rrui__list__item:hover:not(.rrui__list__item--focus)
{
	background-color: transparent;
}

.slideout-menu .rrui__list__item
{
	border-left: 0.2rem solid transparent;
}

.slideout-menu .rrui__list__item--focus
{
	position: relative;
	/*background-color: #EB006D;*/
	background-color: transparent;
	/*border-color: #2bd7f0;*/
}

.slideout-menu .rrui__list__item--focus:before
{
	position: absolute;
	left: 0;
	top: calc((100% - 50%) / 2);
	display: block;
	content: '';
	width: 0.1rem;
	height: 50%;
	background-color: #2bd7f0;
}

.slideout-menu .rrui__list__item--focus:active
{
	background-color: #2bd7f0;
}

.ExpansionPanel--button .rrui__expansion-panel__header,
.ExpansionPanel--button .rrui__expansion-panel__content {
	padding-left: calc(0.6rem * 2);
	padding-right: calc(0.6rem * 2);
}

.ExpansionPanel--button .rrui__expansion-panel__header {
	height: calc(0.6rem * 4);
}

.ExpansionPanel--button.rrui__expansion-panel--expanded .rrui__expansion-panel__header {
	height: calc(0.6rem * 5);
}

.ExpansionPanel--button .rrui__expansion-panel__header {
	width: 100%;
	border: 1px solid #d7d7d7;
}

.ExpansionPanel--button .rrui__expansion-panel__header {
	background-color: #efefef;
}

.ExpansionPanel--button .rrui__expansion-panel__header:active {
	background-color: #eaeaea;
}

.ExpansionPanel--button {
	background-color: #fafafa;
}

.ExpansionPanel--button .rrui__expansion-panel__content {
	border-bottom: 1px solid #efefef;
	border-left: 1px solid #efefef;
	border-right: 1px solid #efefef;
}

.ExpansionPanel--button .rrui__expansion-panel__toggle-icon {
	transform: rotate(0deg);
}

.ExpansionPanel--button.rrui__expansion-panel--expanded .rrui__expansion-panel__toggle-icon {
	transform: rotate(180deg);
}