:root {
  --SynopticPrimaryColor: #204893;
  --SynopticPrimaryLightColor: #75C1E0;
  --SynopticPrimaryDarkColor: #1A305B;
  --SynopticPrimaryAccentColor: #F2D32E;
  --SynopticSecondaryColor: #61B646;
  --SynopticSecondaryDarkColor: #026635;
  --SynopticSecondaryAccentColor: #F8991D;

  --SynopticButtonBorderRadius: 3px;
  --SynopticFontFamily: 'Karla',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --SynopticHeaderFontFamily: 'Rubik','Karla',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --SynopticMonospaceFontFamily: "Menlo","Consolas",monospace;
}
html {
    font-size: 16px;
    min-height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust:100%;
}

* {
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
 	font-family: var(--SynopticFontFamily);
 	padding:15px;
 	margin:0;
 	top:0;
 	line-height:1.6em;
 	/*font-weight:300;*/
 	color:#333333;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	position:absolute;
  	width:100%;
  	transition: top .3s;
  	-webkit-transition: top .3s;
}

h1, h2, h3, h4, h5 {
	font-family: var(--SynopticHeaderFontFamily);
	line-height: 1.3em;
	font-weight:500;
}

.content {
	max-width:800px;
	margin:auto;
	padding:20px 10px;
}

header { background-color: #FFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); height: 60px; padding: 0; text-align: left; color: #222; font-size: 25px; line-height: 60px; position: relative; margin:-15px -15px 0px -15px;; }

header img, header svg { position: relative; display: inline; top: 10px; left: unset; height: 40px; line-height: 60px; }

header #auth_as { position: absolute; right: 0; height: 40px; margin: 10px 5px; line-height: 40px; top: 0; font-size: 13px; transition: background-color 250ms; border-radius: 4px; padding: 0 40px 0 10px; /* &:hover { background-color:rgba(0,0,0,.1); } */ }

header #auth_as .name { font-weight: bold; }

header #auth_as .email { color: #555; }

header #auth_as .icon { position: absolute; right: 5px; top: 5px; border-radius: 50px; height: 30px; width: 30px; }

header #auth_as .action { display: inline-block; border: 1px solid #ccc; border-radius: 3px; line-height: 20px; margin: 10px; font-size: 12px; padding: 0 5px; transition: background-color 250ms, color 250ms; cursor: pointer; }

header #auth_as .action:hover { background-color: #eee; }

.max-width-box { position: relative; max-width: 1000px; margin: auto; }

code, pre, textarea { font-family: var(--SynopticMonospaceFontFamily); }


p {
	font-size:1.1em;
}

header a {
	/*display: none;*/
	font-weight:600;
	color:#FFF;
	line-height:55px;
	padding:0 20px;
	font-size:17px;
	text-decoration: none;
}

label {
	font-weight:600;
}

hr {
	border-width: 0 0 1px 0;
	border-color:#ccc;
}
a:hover {
    color: #0D47A1;
    text-decoration:underline;
}

a {
    color: #1565C0;
    text-decoration: none
}
footer {
	color: #555;
	max-width:800px;
	margin:auto;
	font-size:13px;
	/*font-weight:200;*/
	margin-top:20px;
	padding:30px;
}
.hidden {
	display:none;
}
/*
* Remove eventually
*/
.userIcon {
	position: absolute;
    right: 0px;
    top: 0px;
    z-index: 100000;
    text-align: center;
    width: 70px;
    font-size:13px;
    padding: 5px;
    box-sizing: border-box;
    height:55px;
    background-color: rgba(0, 0, 0, 0.4);
    font-weight: 600;
    color: rgb(255, 255, 255);
    cursor: pointer;
    line-height:14px;
    overflow: hidden;
}
.userInfoExtra {
	position: absolute;
    right: 0px;
    top: 55px;
    z-index: 100000;
    text-align: center;
    width: 300px;
    padding: 5px;
    background-color: rgb(255, 255, 255);
    border: 0px solid rgb(221, 221, 221);
    box-shadow: rgba(0, 0, 0, 0.2) -1px 2px 4px;
    font-weight: 400;
    color: rgb(0, 0, 0);
    overflow: hidden;
    font-size:14px;
}
.userInfoExtra hr {
	border:0;
	height:1px;
	background-color: #ccc;
}
.userInfoExtra button {
	border:0;
	background-color: #C62828;
	color:#FFF;
	border-radius:3px;
	padding:5px;
	font-size:13px;
}