html {
	position: relative;
}

body {
	font-family: 'Libre Franklin', Arial, sans-serif;
	font-weight: normal;
	font-style: normal;

	font-size: 15px;
	color: #000000;
	background-color: #fbfbf7;

	padding: 0;
	margin: 0;
	overflow-y: scroll;
	padding-top: 96px;
	padding-bottom: 150px;
	min-height: calc(100vh - 72px);
	padding-top: var(--top-height);
	min-height: calc(100vh - var(--top-height) - 150px);
}

html.menu_open body,
html.menu_open nav.bar {
	padding-right: var(--scrollbar-width);
}
html.menu_open body {
	overflow: hidden;
	background-position-x: calc(50% - var(--scrollbar-width) / 2);
}
html.menu_open main {
	overflow: hidden;
	height: calc(100vh - 84px);
	margin-bottom: 0;
}

div#css_size::before {
	content: 'large';
}

html.dev blink {
	display: inline-block;
	font-size: 20px;
	background-color: yellow;
	padding: 4px;
	margin: 0 2px;
	color: #000000;
	border: 1px solid #000000;
	animation: warning 5s linear infinite;
}
@keyframes warning {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.5);
  }
  100% {
      transform: scale(1);
  }
}

div#warning_dev_site {
	display: none;
}
html.dev div#warning_dev_site {
	display: inline-flex;
	position: absolute;
	top: -4px;
	right: 10px;
	justify-content: center;
    align-items: center;
	background-color: rgb(255, 211, 0);
	color: #000000;
	overflow: hidden;
	border: 2px solid #000000;
	border-radius: 4px;
	transform: rotate3d(1, 1, 1, -15deg);

	font-size: 16px;
	font-weight: bold;
	padding: 1px 4px;
}
html.dev div#warning_dev_site i {
	font-size: 20px;
	margin-right: 2px;
	transform: rotate3d(0, 1, 0, 0deg);
}

.transition_off,
.transition_off img {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

select,
a,
textarea,
input,
button {
	font-family: inherit;
	font-size: inherit;
}
textarea {
	xbackground-color: transparent;
}

input[type="range"].clear {
	-webkit-appearance: none;
	background: transparent;
	margin: 0;
	padding: 0;
}
input[type="range"].clear::-webkit-slider-thumb {
	-webkit-appearance: none;
}
input[type="range"].clear:focus {
	outline: none;
}
input[type="range"].clear::-ms-track {
	width: 100%;
	cursor: pointer;
	background: transparent; 
	border-color: transparent;
	color: transparent;
}
input[type="range"].clear::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: 0 none;
	cursor: pointer;
	margin: 0;
}
input[type="range"].clear::-moz-range-thumb {
	border: 0 none;
	cursor: pointer;
	margin: 0;
}
input[type="range"].clear::-ms-thumb {
	cursor: pointer;
	margin: 0;
}
/*******/

div.w {
	box-sizing: border-box;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 16px;
	min-height: 20px;
}

pre {
	color: #f0f0f0;
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.2);
}

hr {
	height: 1px;
	border-width: 0;
	color: #d0d1d2;
	background-color: #d0d1d2;
}

img {
	border: 0;
}

.hidden {
	display: none !important;
}

.hyperlink-image-no-float,
.hyperlink.image_no_float {
	clear: both;
	text-align: center;
}
figure.hyperlink {
	margin: 0;
}
figure.hyperlink figcaption {
	margin-top: 4px;
}
img.hyperlink {
	width: auto;
	height: auto;
}
.hyperlink.full_width {
	width: 100%;
}
.hyperlink.half_width {
	width: calc(100% / 2);
}
.hyperlink.third_width {
	width: calc(100% / 3);
}
.hyperlink.quarter_width {
	width: calc(100% / 4);
}
.hyperlink-image-float-left {
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
}
.hyperlink-image-float-right {
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}
.hyperlink-caption {
	font-size: 80%;
}
audio.hyperlink {
	width: 100%;
	height: 40px;
}

a {
	color: inherit;
}
a:hover {
	text-decoration: underline;
}
div.page_text a {
	font-weight: 400;
}

i.material-icons {
	font-size: 20px;
	line-height: inherit;
}

h1,
h2,
h3 {
	font-family: 'Libre Franklin', Arial, sans-serif;
	margin: 0;
	font-weight: 500;
}

h1 {
	font-size: 20px;
}

h2 {
	font-size: 18px;
}

h3 {
}

ul {
	margin: 4px 0;
	padding-inline-start: 20px;
}

ol.hlink,
ul.hlink {
	margin-top: 0;
	margin-bottom: 0;
}


/*
 *
 *
 *
 */

div.modal_action_bar {
	color: #041e42;
}

a.button,
button.button,
input.button,
div.white_box a.button {
	display: inline-block;

	padding: 7px;
    margin: 0;
	cursor: pointer;

	text-transform: uppercase !important;
	text-decoration: none !important;
	text-align: center;

	font-family: inherit;
	font-size: inherit;
	font-weight: 400;

	color: #364a67;
	background-color: transparent;
	border: 1px solid transparent;
    border-radius: 4px;
	line-height: 21px;

	white-space: nowrap;
}

a.button.warn,
button.button.warn,
input.button.warn {
	color: #e25822;
}
a.button i.material-icons,
button.button i.material-icons {
	vertical-align: bottom;
	line-height: inherit;
}

a.button:hover,
button.button:hover,
input.button:hover,
div.white_box a.button:hover {
	background-color: #364a67;
	color: #ffffff;
}

a.button:focus,
button.button:focus,
input.button:focus,
div.white_box a.button:focus {
	background-color: #364a67;
	color: #ffffff;
}

a.button.high,
button.button.high,
input.button.high,
div.white_box a.button.high {
	color: #ffffff;
    border-color: #041e42;
	background-color: #041e42;
}

a.button.high:hover,
button.button.high:hover,
input.button.high:hover,
div.white_box a.button.high:hover {
    border-color: #364a67;
	background-color: #364a67;
}
a.button.high:focus,
button.button.high:focus,
input.button.high:focus,
div.white_box a.button.high:focus {
    border-color: #364a67;
	background-color: #364a67;
}

a.button.medium,
button.button.medium,
input.button.medium,
div.white_box a.button.medium {
    border-color: #878787;
}

a.button.disabled,
button.button:disabled,
input.button:disabled,
div.white_box a.button.disabled {
	color: #878787;
	cursor: default;
	background-color: transparent;
}
a.button.high.disabled,
button.button.high:disabled,
input.button.high:disabled,
div.white_box a.button.high.disabled {
	background-color: #cbcbcb;
	border-color: #cbcbcb;
	color: #878787;
}

/*
 * loop buttons
 */
a.button_loop,
button.button_loop {
	display: inline-block;

    margin: 0;
	cursor: pointer;

	text-transform: uppercase !important;
	text-decoration: none !important;
	text-align: center;

	font-family: inherit;
	font-size: inherit;
	font-weight: bold;

	color: #ffffff;
	background-color: transparent;
	border: 1px solid transparent;

	xpadding: 7px 10px;
    xborder-radius: 4px;

	padding: 7px 20px;
	border-radius: 37px;
	line-height: 21px;

	white-space: nowrap;
}

a.button_loop i.material-icons,
button.button_loop i.material-icons {
	vertical-align: bottom;
	line-height: inherit;
}

/* Low */
a.button_loop.low,
button.button_loop.low {
    border-color: transparent;
    background-color: transparent;
}
a.button_loop.low:hover,
button.button_loop.low:hover {
    border-color: transparent;
	background-color: #35707e;
}
a.button_loop.low:focus,
button.button_loop.low:focus {
    border-color: transparent;
	background-color: #35707e;
}
a.button_loop.low.disabled,
button.button_loop.low:disabled {
	cursor: default;
	color: #7691a4;
	background-color: transparent;
}

/* Medium */
a.button_loop.medium,
button.button_loop.medium {
    border-color: #5da7a9;
    background-color: transparent;
}
a.button_loop.medium:hover,
button.button_loop.medium:hover {
    border-color: #35707e;
	background-color: #35707e;
}
a.button_loop.medium:focus,
button.button_loop.medium:focus {
    border-color: #35707e;
	background-color: #35707e;
}
a.button_loop.medium.disabled,
button.button_loop.medium:disabled {
	cursor: default;
	color: #7691a4;
	border-color: #517087;
	background-color: transparent;
}

/* High */
a.button_loop.high,
button.button_loop.high {
    border-color: #5da7a9;
    background-color: #5da7a9;
}
a.button_loop.high:hover,
button.button_loop.high:hover {
    border-color: #35707e;
	background-color: #35707e;
}
a.button_loop.high:focus,
button.button_loop.high:focus {
    border-color: #35707e;
	background-color: #35707e;
}
a.button_loop.high.disabled,
button.button_loop.high:disabled {
	cursor: default;
	color: #8fa1ae;
	border-color: #517087;
	background-color: #517087;
}

/**************************/

.white_box a.link_back {
	display: flex;
	text-decoration: none;
	align-items: center;
	line-height: 20px;
	margin-bottom: 8px;
}

nav.bar {
	position: fixed;
	top: 0;
	width: 100%;
	height: 72px;
	height: var(--top-height);

	z-index: 500;

	box-sizing: border-box;

	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;

	font-weight: 400;
	box-shadow: 0px 0px 24px rgb(106 145 167 / 20%);
	color: #000000;
	background-color: #ffffff;
}

nav.bar > div > nav {
	display: table;
	width: 100%;
	height: 72px;
	height: var(--top-height);
	box-sizing: border-box;

	font-size: 16px;
}
nav.bar > div > nav nav.row {
	display: table-row;
}
nav.bar > div > nav nav.cell {
	display: table-cell;
	vertical-align: middle;
}
nav.bar > div > nav nav.cell:nth-of-type(1) {
	text-align: left;
	width: 28%;
}
nav.bar > div > nav nav.cell:nth-of-type(2) {
	text-align: center;
}
nav.bar > div > nav nav.cell:nth-of-type(3) {
	text-align: right;
	width: 28%;
}
nav a.logo {
	position: relative;
}
nav a.logo img {
	vertical-align: middle;
}
nav a.logo img.small {
    display: none;
}

nav.globals {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
nav.globals > ul > li > a.menu_button {
	padding: 0 4px;
}
nav.globals ul.sub_menu {
	color: #041e42;
	background-color: #ffffff;
}
nav a.menu_button {
	display: block;
	text-decoration: none;
	line-height: 42px;
	height: 42px;
	overflow: hidden;
}
nav a > i.material-icons {
	vertical-align: top;
	line-height: inherit;
}
nav.globals ul.search form {
	display: flex;
	align-items: center;
	padding: 16px;
}
nav.globals ul.search input[type="text"] {
	box-sizing: border-box;
	width: 320px;
	padding: 10px 20px;
	border: 1px solid #041e42;
	margin-left: 16px;
	background-color: #ffffff;
}
nav.globals ul.search input[type="text"]:focus {
	outline: 0;
}

nav a.menu_button.has_no_submenu > i.material-icons.sub_menu {
	display: none;
}
nav i.material-icons.nav_icon {
	vertical-align: top;
	padding-right: 10px;
	line-height: inherit;
}
nav img.nav_icon {
	vertical-align: middle;
	padding-right: 10px;
	line-height: inherit;
	width: 20px;
}
nav span.nav_icon {
	display: inline-block;
	width: 20px;
}

nav.globals ul {
	list-style-type: none;
	margin: 0 10px 0 0;
	padding: 0;
	box-sizing: border-box;
}

nav ul.sub_menu {
	position: absolute;
	top: 72px;
	top: var(--top-height);

	max-height: 0px;
	text-align: left;
	overflow: hidden;

	padding: 0;
	transition: max-height 0.05s;
	z-index: 10;
}
nav.globals ul.open > li > ul.sub_menu {
	border-radius: 0 0 5px 5px;
	transition: max-height 0.2s;
	box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.1);
}
nav.globals ul > li > ul.sub_menu > li.first-under-top,
nav.globals ul > li > ul.sub_menu > li:first-child {
	padding-top: 8px;
}
nav.globals ul > li > ul.sub_menu > li:last-child {
	padding-bottom: 8px;
}
nav.globals ul > li > ul.sub_menu li a {
	display: block;
	line-height: 34px;
	padding: 0 16px;
	color: inherit;
	text-decoration: inherit;
}

nav ul.sub_menu > ul {
	margin: 0;
}
nav ul.sub_menu > ul > li a {
	padding-left: 45px;
}
nav ul > li a.menu_button img.nav_icon.empty {
	display: none;
}
nav ul li.divide_after::after {
	content: '';
	display: list-item;
	border-bottom: 1px solid #606060;
	margin: 8px 16px;
}

nav.globals ul.account a > div.name {
	display: inline-flex;
	flex-direction: column;
	vertical-align: middle;
	line-height: normal;
}
nav.globals ul.account li.small > div.name > div,
nav.globals ul.account a > div.name > div {
	text-align: center;
	line-height: inherit;
	padding: 0 16px;
}
nav.globals ul.account li.small > div.name > div:nth-child(2),
nav.globals ul.account a > div.name > div:nth-child(2) {
	font-size: 14px;
}
nav.globals ul.account li.small {
	display: none;
}
/* always use small */
nav.globals ul.account > li.large {
	display: none;
}
nav.globals ul.account li.small {
	display: list-item;
}
nav.globals ul.account li.first-under-top {
	padding-top: 0;
}

/****************/
nav.site > a.menu {
	display: inline-block;
	color: inherit;
	line-height: 48px;

	text-align: center;
	text-decoration: none;

	box-sizing: border-box;
	white-space: nowrap;
}
nav.site > a.menu > i.material-icons {
	display: inline-block;
	margin-right: 8px;
}

nav.bar > div.small.top_level a {
	color: inherit;
	text-decoration: inherit;
}

nav.page {
	position: fixed;
	height: 100%;
	top: 0;
	left: -1px;
	overflow: hidden;
	color: #041e42;
}
nav.page.open {
	background-color: rgb(106 145 167 / 90%);
	width: 100vw;
	overflow-y: scroll;
}
nav.page > nav {
	background-color: #ffffff;
	xbackground-color: rgba(255, 255, 255, 0.96);
	max-width: 0;
	min-height: 100vh;
	width: 100vw;
	transition: max-width 0.2s;
	overflow: hidden;
}
nav.page.open > nav {
	max-width: 448px;
	transition: max-width 0.2s;
}
nav.page > nav > nav {
	width: 100vw;
	max-width: 448px;
}

nav.page ul.sub_menu {
	position: static;
	max-height: 40000px;
	transition-duration: 0s;
}
nav.page ul.open > ul.sub_menu {
	transition-duration: 0s;
}

nav.page div.menu_close {
	font-size: 24px;
	line-height: 32px;
	padding: 56px 80px 32px 80px;
}
nav.page div.menu_close a {
	text-decoration: none;
	text-transform: uppercase;
	outline: 0 none;
	overflow: hidden;
	display: inline-block;
}
nav.page div.menu_close i.material-icons {
	vertical-align: middle;
	font-size: 20px;
	margin-top: -3px;
}

nav.page ul.d0 {
	padding: 0 80px;
}
nav.page ul.d0 > li {
	padding: 8px 0;
}
nav.page ul.d0 > li > a {
	line-height: 34px;
	height: auto;
	text-transform: uppercase;
}
nav.page ul.d0 > li.sub_open {
	margin-bottom: 0px;
}
nav.page li.sub_open {
	margin-bottom: 8px;
}
nav.page li a {
	line-height: 34px;
}
nav.page ul > li.sub_open > a {
	font-weight: 400;
}

nav.page a {
	display: block;
	text-decoration: none;
	overflow: hidden;
}
nav.page ul.d0 > li > a {
	padding-left: 0px;
}
nav.page ul.d1 > li > a {
	padding-left: 16px;
}
nav.page ul.d2 > li > a {
	padding-left: 32px;
}
nav.page ul.d3 > li > a {
	padding-left: 48px;
}
nav.page ul.d4 > li > a {
	padding-left: 64px;
}
nav.page ul.d5 > li > a {
	padding-left: 80px;
}
nav.page ul.d6 > li > a {
	padding-left: 96px;
}
nav.page ul.d7 > li > a {
	padding-left: 112px;
}
nav.page ul.d8 > li > a {
	padding-left: 128px;
}

nav.page ul a span.more,
nav.page ul a span.less {
	float: right;
}
nav.page ul span.more {
	display: inline;
}
nav.page ul span.less {
	display: none;
}
nav.page li.sub_open > a span.more {
	display: none;
}
nav.page li.sub_open > a span.less {
	display: inline;
}

nav.page li > div.submenu_container {
	max-height: 0;
	overflow: hidden;
}
nav.page li.has_submenu.sub_open > div.submenu_container {
	max-height: 4800px;
}

nav.page ul.selected > li > a:nth-of-type(1),
nav.page li.selected > a:nth-of-type(1) {
	font-weight: bold;
}

nav.page ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

nav.page ul > ul.sub_menu li a {
	display: block;
	line-height: 34px;
	color: inherit;
	text-decoration: inherit;
}

nav.page ul.page_divider::before {
	display: block;
	content: '';
	border-top: 1px solid #cccccc;
	padding-bottom: 16px;
	margin: 16px 0;
}

nav.page ul.shortcuts {
	background-color: #ffffff;
	padding: 32px 80px;
	margin-top: 24px;
	line-height: 24px;
}
nav.page ul.shortcuts li {
	padding: 16px 0;
}

nav.globals ul {
	margin: 0;
}

nav i.material-icons {
	font-size: 24px;
}
nav .sub_menu i.material-icons {
	font-size: 22px;
}
nav.page img.nav_icon {
	display: none;
}
nav img.nav_icon {
	width: 24px;
}

/****************/

main {
	display: block;
	position: relative;
	z-index: 10;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;

	margin-top: 20px;
	margin-bottom: 20px;
}
main:after {
	display: block;
	content: '';
	clear: both;
}

div.white_box,
div.drawer {
	background-color: #ffffff;
	padding: 20px;
	border-radius: 4px;
	color: #041e42;
	max-width: 752px;
	box-sizing: border-box;
	margin: auto;
	margin-bottom: 16px;
}

div.white_box.admin {
}

div.white_box a {
	color: inherit;
	text-decoration: underline;
}
div.drawer a {
	color: inherit;
}

div.main_content {
	float: left;
	width: 752px;
	margin-right: 16px;
}
div.extra_content {
	float: left;
	width: calc(100vw - 801px);
	max-width: 490px;
}
div.drawer_container_tmp {
	float: left;
	width: 360px;
}
div.drawer_container,
div.drawer_container.open {
	float: left;
	width: 360px;
}

textarea.loop_reflection {
	border: 0 none;
	margin: 0 0 16px 0;
	box-sizing: border-box;
	height: 150px;
	width: calc(100% - 2px);
	resize: none;
	border: 1px solid #35707e;
	padding: 8px;
}

/*
 * Avatar
 */

div.avatar {
	width: 40px;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	overflow: hidden;
	border-radius: 50%;
	text-align: center;
	color: white;
	vertical-align: middle;
	font-size: 24px;
	text-transform: uppercase;
}
div.avatar > img {
	width: 100%;
}

/*
 * material: app_bar
 */
div.app_bar {
	box-sizing: border-box;
	min-height: 49px;

	margin-top: -8px;
	margin-bottom: 12px;
	padding-bottom: 12px;
}
div.app_bar,
div.app_bar > div:nth-child(1) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 24px;
}
div.app_bar a.app_bar_nav {
	height: 24px;
	margin-right: 24px;
}
div.app_bar > div:nth-child(1) {
	font-size: 16px;
}
div.app_bar .actions_bar a,
div.app_bar .actions_bar button {
	margin-left: 3px;
}

html.p_1093 div.app_bar,
html.p_1089 div.app_bar,
html.p_1087 div.app_bar,
html.p_1088 div.app_bar,
html.p_1090 div.app_bar {
	border-bottom: 1px solid rgba(4, 30, 66, 0.4);
	margin-bottom: 24px;
	min-height: 41px;
	padding-bottom: 4px;
}

/*
 * material: list
 */
div.list_header .subheader {
	font-size: 15px;
	text-transform: uppercase;
}

div.list_header,
div.list_header > div:nth-child(1) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 24px;
}

div.list_header > div:nth-child(1) {
	font-size: 16px;
}

div.list_header {
	margin-left: 3px;
}

div.material_list .content {
	display: block;
	width: 100%;
	text-decoration: none;
	padding: 8px;
}
div.material_list .avatar {
	margin-right: 8px;
}
div.list_item_two {
	display: flex;
	justify-content: space-between;
	margin-left: -8px;
	margin-right: -8px;
}
div.material_list .list_item_two:hover {
	background-color: #ececec;
	border-radius: 4px;
}
div.list_item_two .content {
	display: flex;
	align-items: center;
}
div.material_list .list_item_two .title {
	font-size: 15px;
}
div.material_list .list_item_two .text {
	color: #777777;
}
div.title:empty,
div.text:empty {
	display: none;
}

/*
 * material: cards
 */
.material_card_container {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.material_card {
	display: block;
	width: 100%;
	min-width: 200px;
	max-width: calc((100% / 3) - 16px);
	box-sizing: border-box;
	border: 1px solid rgba(4, 30, 66, 0.4);
	border-radius: 16px;
	text-decoration: none !important;
	word-wrap: break-word;
	text-align: center;
	overflow: hidden;
}
.material_card .media {
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	overflow: hidden;
}
.material_card .description {
	padding: 16px;
}
.material_card .description > div:last-child {
	margin-bottom: 0;
}
.material_card .title {
	font-size: 18px;
}
.material_card .text {
	margin-top: 4px;
}
.material_card .supporting_text {
	margin-top: 8px;
}
.material_card .actions {
	margin-top: 8px;
}
.material_card > div:empty,
.material_card .description > div:empty {
	display: none;
}

/*
 * Action bar
 */
div.white_box div.action_bar {
	margin-bottom: 8px;
}

div.white_box div.action_bar.small {
	min-width: 50%;
	float: right;
	text-align: right;
	margin-bottom: 0;
}

div.white_box div.action_bar > h2 {
	line-height: 36px;
}

/*
 * Action bar
 */
div.action_bar.new {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
}
div.action_bar.new span.header {
	font-size: 15px;
	font-weight: bold;
}
div.action_bar.new span.header i.material-icons {
	vertical-align: bottom;
	font-size: 16px;
}
div.action_bar.new div.actions {
	text-align: right;
	white-space: nowrap;
}

.divider {
	border-bottom: 1px solid #b8dcdf;
	margin-bottom: 16px;
	padding-bottom: 16px;
}

/*
 * page_text
 */
div.page_text {
	margin: 0 auto;
	text-align: center;
	max-width: 624px;
}
div.page_text h1 {
	margin-bottom: 16px;
}
div.page_text h2 {
}

/*
 * Input handling
 */
.templates {
	width: 100%;
	max-width: 480px;
	color: #000000;
}
.templates .fail {
    display: flex;
    align-items: center;

	color: #000000;
	background-color: #ffffff;
	padding: 8px;
	margin: 16px 0;
	padding-left: 44px;
	font-size: 15px;
}
.templates .fail::after {
	content: '';
	display: block;
	clear: both;
}
.templates .fail i.material-icons {
	font-size: 28px;
	vertical-align: top;
	margin-right: 8px;
	margin-left: -36px;
	color: #041e42;
}
.templates .fail span.message {
	display: inline-block;
	vertical-align: sub;
}

.templates h1 {
	display: flex;
	align-items: center;
	font-size: 24px;
	margin-bottom: 16px;
	padding: 0;
	line-height: 36px;
}
.templates h1 i.material-icons {
	font-size: inherit;
	margin-right: 4px;
}

.templates div.row {
	margin-bottom: 8px;
}
.templates div.row.extra_space {
	margin-bottom: 16px;
}
.templates div.row.extra_space_top {
	margin-top: 16px;
}

.templates label {
	display: block;
}
.templates label.checkbox {
	display: inline-block;
	margin-right: 16px;
	font-size: 130%;
}
.templates label.required {
	text-align: right;
	font-size: 90%;
	font-style: italic;
	padding-right: 3px;
}

.templates div.label {
	width: calc(100% - 2px);
	font-size: 130%;
	padding: 5px 0;
	box-sizing: border-box;
}

.templates select,
.templates input[type="text"],
.templates input[type="password"],
.templates input[type="email"],
.templates textarea,
.templates div[contenteditable="true"] {
	width: calc(100% - 2px);
	font-size: 15px;
	padding: 8px 8px;
	box-sizing: border-box;
	border: 1px solid #041e42;
	margin: 1px;
	background-color: #ffffff;
}
div.view_edit.content.player .templates textarea[name='text_2'] {
	font-family: monospace;
	font-size: 13px;
}
.templates textarea {
	resize: none;
}
.templates div[contenteditable="true"] {
	max-height: 300px;
	overflow-y: auto;
}
.templates div[contenteditable="true"][placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}
.templates input[type="text"]:disabled {
	background-color: #f2f2f2;
}
.templates label.image_selection {
}
.templates label.image_selection div.container {
	display: flex;
	align-items: center;
	overflow: hidden;
	flex-wrap: wrap;
}
.templates label.image_selection div.container img {
	margin-right: 8px;
	margin-bottom: 8px;
}
.templates label.image_selection div.container button {
	margin-bottom: 8px;
}

.templates input[type="text"].has_error,
.templates input[type="email"].has_error,
.templates input[type="password"].has_error {
	width: calc(100% - 2px);
	border: 2px solid #cc0000;
	margin: 0px;
}

.templates a.list {
	display: inline-block;
	text-decoration: none;
	font-size: 18px;
	padding: 8px 0;
	background-image: url(/images/layout/li.svg);
	padding-left: 20px;
    background-repeat: no-repeat;
    background-position: center left;
	line-height: 19px;
	outline: 0 none;
}
.templates a.list.current {
	background-image: url(/images/layout/li_selected.svg);
}
.templates a.list.current > img {
	height: 19px;
	vertical-align: top;
}

.white_box ul,
.templates ul {
	margin: 4px 0;
	padding-inline-start: 20px;
}

/* tree selection */
.templates ul.filter_selection {
	list-style-type: none;
	margin: 0;
	padding-inline-start: 20px;
	padding-left: 20px;
	box-sizing: border-box;
	min-width: 280px;
}
.templates ul.filter_selection.d0 {
	padding-left: 0px;
}
.templates ul.filter_selection li {
	padding: 0;
	margin: 13px 0;
}
.templates ul.filter_selection li > a {
	display: block;
	font-size: 13px;
}
.templates ul.filter_selection li.selected > a {
	font-weight: bold;
}
.templates ul.filter_selection li.unselectable {
	opacity: 0.75;
	cursor: not-allowed;
}

/* smaller templates */
.templates_small div.row {
	margin-bottom: 8px;
}
.templates_small div.row.extra_space {
	margin-bottom: 16px;
}
.templates_small label {
	display: block;
}
.templates_small label.checkbox {
	display: inline-block;
	margin-right: 16px;
	font-size: 130%;
}
.templates_small label.required {
	text-align: right;
	font-size: 90%;
	font-style: italic;
	padding-right: 3px;
}

.templates_small div.label {
	width: calc(100% - 2px);
	font-size: 130%;
	padding: 5px 0;
	box-sizing: border-box;
}
.templates_small select,
.templates_small input[type="text"],
.templates_small input[type="email"]{
	width: calc(100% - 2px);
	font-size: inherit;
	padding: 6px 15px;
	box-sizing: border-box;
	border: 1px solid #041e42;
	margin: 1px;
	background-color: #ffffff;
}
.templates_small input[type="text"]:disabled {
	background-color: #f2f2f2;
}

/*
 * page_edit
 */
div.edit .tabs {
	margin-bottom: 16px;
}
div.edit .templates {
	max-width: none;
}
div.edit form.templates::before {
	content: '';
	display: block;
	height: 1px;
	background-color: #000000;
	margin: 16px 0 8px 0;	
}



/*
 * Privacy policy
 */
div.privacy_policy {
	position: fixed;
	background-color: rgba(50, 50, 50, 0.85);
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	text-align: left;
	z-index: 1000;
}
div.privacy_policy > div:first-child > div:nth-child(2) {
	width: 100%;
	background-color: #ffffff;
	padding: 20px 50px;
	box-sizing: border-box;
}
div.privacy_policy > div:first-child {
	width: 100vw;
	max-width: 694px;
	height: calc(100vh - 20px);
	margin: 10px auto;
	background-color: #ffffff;
	box-sizing: border-box;
	border: 1px solid #555555;
	overflow-y: auto;
}
div.privacy_policy > div:first-child > a:first-child {
	float: right;
	font-size: 20px;
	font-weight: normal;
	color: #555555;
	background-color: #f6f6f6;
	border-radius: 10%;
	display: inline-block;
	margin: 10px 10px;
}
div.privacy_policy h1 {
	text-align: center;
	text-transform: none;
	margin: 0;
	margin-bottom: 20px;
}
div.privacy_policy h2 {
	text-transform: none;
	margin: 0;
	margin-bottom: 4px;
	font-size: 1.2em;
}
div.privacy_policy ul {
	margin: 0;
	padding: 0;
	padding-left: 17px;
	list-style: outside;
}
@media screen and (max-width: 694px) {
	div.privacy_policy > div:first-child {
		margin: 0;
		height: 100vh;
		border: none;
	}
	div.privacy_policy > div:first-child > div:nth-child(2) {
		padding: 20px 5%;
	}
}

/*
 * Translations
 */
div.base_bar.tri {
	width: 100%;
	height: 100%;
	display: inline-block;
}
div.base_bar.tri > div {
	width: 0px;
	height: 100%;
	display: inline-block;
}
div.base_bar.tri > div.color_good {
	background-color: #228b22;
}
div.base_bar.tri > div.color_bad {
	background-color: #b22222;
}
div.base_bar.tri > div.color_stale {
	background-color: #22228b;
}
div.resource_translate {
}
div.resource_translate div.resource {
	margin-bottom: 15px;
}
div.resource_translate div.resource_key {
	margin: 0;
	padding: 0;
	margin-bottom: 2px;
	margin-left: 37px;
}
div.resource_translate div.translate_row textarea.translate {
	width: calc(100% - 35px - 20px);
	box-sizing: border-box;
	margin-left: 5px;
	height: 35px;
	min-height: 35px;
	max-height: 250px;
	resize: none;
	padding: 8px;
	margin-bottom: 5px;
	vertical-align: bottom;
	outline: none;
	border: 1px solid #aeaeae;
	font-size: 13.3px;
}
div.resource_translate div.translate_row textarea.translate:focus {
	border: 1px solid #8080f0;
}
div.resource_translate div.language_container,
div.resource_translate div.selection_container {
	display: inline-block;
	vertical-align: top;
}
div.resource_translate  div.language_container label,
div.resource_translate div.selection_container label {
	display: inline-block;
	text-align: right;
	box-sizing: border-box;
	padding-right: 5px;
	vertical-align: middle;
	margin-bottom: 5px;
}
div.resource_translate  div.language_container label {
	width: 80px;
}
div.resource_translate div.selection_container label {
	width: 80px;
}
input#search_text,
select#l1,
select#l2,
select#s1,
select#s2,
input#s3 {
	margin-bottom: 5px;
}
select#l1,
select#l2,
select#s1,
select#s2 {
	border: 1px solid #aeaeae;
	background-color: #ffffff;
}
input#search_text {
	width: 200px;
	padding: 9.5px 4px;
	vertical-align: top;
}
select#l1 {
}
select#l1,
select#l2 {
	width: 130px;
	height: 19px;
	vertical-align: middle;
}
select#s1 {
	width: 120px;
	vertical-align: middle;
}
select#s2 {
	width: 120px;
	vertical-align: middle;
}
input#s3 {
	vertical-align: middle;
}
div.resource_translate div.translate_row textarea.translate.readonly {
	background-color: #f0f0f0;
	border: 1px solid #f0f0f0;
}
div.resource_translate div.translate_row textarea.translate.readonly + a.save {
	display: none;
}
div.resource_translate div.translate_row img.flag {
	width: 22px;
	border: 1px solid #efefef;
	vertical-align: top;
	margin-top: 6px;
}
div.resource_translate div.translate_row a.save {
	width: 24px;
	color: #aeaeae;
	pointer-events: none;
	cursor: default;
}
div.resource_translate div.translate_row a.save.dirty {
	color: #000000;
	pointer-events: all;
	cursor: pointer;
}

/*
 * about_me
 */
#about_me {
	width: 300px;
}
#about_me span.title {
	display: inline-block;
	width: 120px;
}
#about_me input {
	margin-bottom: 5px;
}
#about_me input[type="text"] {
	box-sizing: border-box;
	width: calc(100% - 120px);
}
#about_me input.button {
	float: right;
}


/*
 * user/verify
 * user/reset
 */
div.user_verify {
}

div.user_verify input.new_name,
div.user_reset input.new_name,
div.user_verify input[type="password"],
div.user_reset input[type="password"] {
	width: 100%;
	font-size: 130%;
	padding: 10px 20px;
	box-sizing: border-box;
	border: 1px solid #041e42;
	margin: 1px;
}
div.user_verify input.new_name.has_error,
div.user_reset input.new_name.has_error,
div.user_verify input[type="password"].has_error,
div.user_reset input[type="password"].has_error {
	border: 2px solid #cc0000;
	margin: 0px;
}

div.user_verify div.password_to_short,
div.user_reset div.password_to_short {
	margin-right: 10px;
	
}

/*
 * Modal
 */
div#modal_container {
	position: fixed;
	background-color: rgb(106 145 167 / 90%);
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	text-align: left;
	z-index: 600;
}
div#modal_container > div.modal {
	position: relative;
	width: 100vw;
	max-width: 694px;
	min-height: 140px;
	max-height: 100vh;
	margin: 0 auto 16px auto;
	box-sizing: border-box;
	overflow-y: auto;

	background-color: #ffffff;
	xbackground-color: rgba(255, 255, 255, 0.96);
	color: #000000;
	padding: 8px 24px 24px 24px;
	border-radius: 0 0 5px 5px;
	border-top: 0 none;
}
div#modal_container div.modal_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
div#modal_container div.modal_header.no_flex {
	display: block;
	position: absolute;
	right: 8px;
}

div#modal_container h2 {
}
div#modal_container h2 i.material-icons {
	vertical-align: text-bottom;
}
@media screen and (max-width:767px) {
	div#modal_container {
		overflow-y: auto;
	}
	div#modal_container > div.modal {
		border-radius: 0 0 10px 10px;
		border-top: 0 none;
		padding: 16px 12px 12px 12px;
	}
}

/*
 * spinner
 */
div.spinner {
	display: flex;
    justify-content: center;
    align-items: center;
}
div.spinner > div {
	width: 100px;
	height: 100px;
	overflow: hidden;
}
div.spinner progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	border: none;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	color: #5da7a9;
	background-color: transparent;
	overflow: hidden;
}
div.spinner progress::-webkit-progress-bar {
	background-color: transparent;
}
div.spinner progress:indeterminate {
	-webkit-mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
	mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
	animation: spinner1 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
}
:-ms-lang(x), div.spinner progress:indeterminate {
	animation: none;
}
div.spinner progress:indeterminate::before,
div.spinner progress:indeterminate::-webkit-progress-value {
	content: "";
	display: block;
	box-sizing: border-box;
	margin-bottom: 0.25em;
	border: solid 8px transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	width: 100% !important;
	height: 100%;
	background-color: transparent;
	animation: spinner2 0.75s infinite linear alternate;
}
div.spinner progress:indeterminate::-moz-progress-bar {
	box-sizing: border-box;
	border: solid 8px transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	background-color: transparent;
	animation: spinner2 0.75s infinite linear alternate;
}
div.spinner progress:indeterminate::-ms-fill {
	animation-name: -ms-ring;
}
@keyframes spinner1 {
	0% {
		transform: rotate(0deg);
	}
	12.5% {
		transform: rotate(180deg);
		animation-timing-function: linear;
	}
	25% {
		transform: rotate(630deg);
	}
	37.5% {
		transform: rotate(810deg);
		animation-timing-function: linear;
	}
	50% {
		transform: rotate(1260deg);
	}
	62.5% {
		transform: rotate(1440deg);
		animation-timing-function: linear;
	}
	75% {
		transform: rotate(1890deg);
	}
	87.5% {
		transform: rotate(2070deg);
		animation-timing-function: linear;
	}
	100% {
		transform: rotate(2520deg);
	}
}

@keyframes spinner2 {
	0% {
		transform: rotate(-30deg);
	}
	29.4% {
		border-left-color: transparent;
	}
	29.41% {
		border-left-color: currentColor;
	}
	64.7% {
		border-bottom-color: transparent;
	}
	64.71% {
		border-bottom-color: currentColor;
	}
	100% {
		border-left-color: currentColor;
		border-bottom-color: currentColor;
		transform: rotate(225deg);
	}
}


/*
 * Select language
 */
form.user_language_select {
	
}
form.user_language_select a.language {
	display: inline-block;
	text-decoration: none;
	font-size: 18px;
	padding: 8px 0;
	background-image: url(/images/layout/li.svg);
	padding-left: 20px;
    background-repeat: no-repeat;
    background-position: center left;
	line-height: 19px;
	outline: 0 none;
}
form.user_language_select a.language.current {
	background-image: url(/images/layout/li_selected.svg);
}
form.user_language_select a.language > img {
	height: 19px;
	vertical-align: top;
}

/*
 * Drawer
 */
div.drawer {
	margin-bottom: 0;
}
div.drawer_icon {
	display: none;
}
div.drawer_close {
	visibility: hidden;
}
div.drawer_top {
	width: 100%;
	display: table;
	margin-bottom: 8px;
}
div.drawer_top > div {
	display: table-row;
}
div.drawer_top > div > div {
	display: table-cell;
	vertical-align: top;
}
div.drawer_top > div > div:nth-child(1) {
	padding-top: 7px;
}
div.drawer_top > div > div:nth-child(2) {
	text-align: right;
}
div.drawer_top h2 {
	line-height: 22px;
}
div.drawer_top h2 > i.material-icons {
	width: 28px;
	vertical-align: top;
}
div.drawer_top h2 > div {
	display: inline-block;
	width: calc(100% - 28px);
}
div.drawer_footer {
	display: none;
}


/*
 * youtube
 */
div.video_embed {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
}
div.video_embed > iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}


/*
 * site_pages
 */
div.site_pages {
}
div.site_pages .pages ul {
	margin: 0;
	padding: 0;
	list-style-type: none;

	padding-left: 16px;
}
div.site_pages .pages ul:first-child {
	padding-left: 0;
}
div.site_pages .pages li {
	padding: 2px 0;
}
div.site_pages .pages a {
	text-decoration: none;
}
div.site_pages .pages a.filtered {
	opacity: 0.45;
}
div.site_pages form.filter {
	margin-bottom: 16px;
}

/*
 * Size
 */
div#css_size::before {
	content: 'large';
}

/*
 * MDC
 */
:root {
	--top-height: 72px;
	--scrollbar-width: 0px;

	--mdc-theme-primary: #444444;
	--mdc-theme-secondary: #444444;
	--mdc-typography-font-family: 'Libre Franklin', Arial, Sans-Serif;
	--mdc-typography-button-font-family: 'Libre Franklin', Arial, Sans-Serif;
}
.disable_ripple {
	display: none;
}
button.mdc-tab:disabled {
	cursor: default;
}

/*
 * user_login
 */
.user_login.templates input {
	font-size: 16px;
}
.user_login_divider {
	display: flex;
    align-items: center;
	margin: 24px 0;
	color: #364a67;
}
.user_login_divider::before,
.user_login_divider::after {
	content: '';
	height: 1px;
	flex-grow: 1;
	background-color: #364a67;
}
.user_login_divider::before  {
	margin-right: 8px;
}
.user_login_divider::after {
	margin-left: 8px;
}

/*
 * footer
 */
footer {
	position: absolute;
	width: 100%;
	bottom: 0;
    padding-top: 32px;
    text-align: center;
    height: 150px;
    box-sizing: border-box;
    border-top: 1px solid rgb(106 145 167);

    background-color: #ffffff;
    z-index: 10;
}
footer div.w {
        position: relative;
}