:root {
	--almost-black: #333;
	--almost-white: #fafafa;

	/* clearly more muted but still has AAA contrast to background */
	/* https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast */
	--slightly-gray: #595959;

	--zeit-de-red: #b91109;
	--pinkish-red: #f86e6d;
	--light-bg-red: #f9e4e3;
	--border-red: #e89e9d;

	--light-green: #cdfcd2;
	--darker-green: #60a400;

	--blue: #0366d6; /* github blue */
	--light-blue: #E6F4FF;
	--dark-bg-blue: #3A6EA5;

	--solarized-fg: #073642;
	--solarized-bg: #fdf6e3;

/* Fonts 
  http://markdotto.com/2018/02/07/github-system-fonts/ 
  https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
*/
	--font-family-titles: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --font-family-mono: JetBrainsMono, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; 
}

@font-face {
	font-family: "Oswald";
	src: url("/ui/fonts/Oswald-Regular-VInikRLBfYBomRSxUj6r8TMw5dsM-nCtYiMT9CP8KP8=.ttf") format("truetype");
	font-weight: 400;
}
@font-face {
	font-family: "Oswald";
	src: url("/ui/fonts/Oswald-Bold-T0P-ZIHKaLpuoZ1N6eyaT49g4zP8iQ6XF_rl3yAOu-k=.ttf") format("truetype");
	font-weight: 700;
}
@font-face {
	font-family: "JetBrainsMono";
	src: url("/ui/fonts/JetBrainsMono-Regular-U6bjRDaqlwAqMwRBqP_iW5gHgRLwVRf_gP_RgcEO-ck=.woff2") format("woff2");
	font-weight: 400;
}


* {
	box-sizing: border-box;
	scrollbar-width: thin; /* get rid of chunky scrollbar in firefox */
}

a, a:visited {
	color: var(--blue);
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

a.inherit {
	color: inherit;
}

table {
	border-collapse: collapse;
	width: 100%;
}

td:first-child, th:first-child {
	padding-left: 0;
}

td:last-child, th:last-child {
	padding-right: 0;
}

/* minimum width without wrapping anything */
td.minw, th.minw {
	white-space: nowrap;
	width: 1%; }

label {
	font-family: var(--font-family-titles); }

button {
	font-family: var(--font-family-mono);
	/* in firefox at least buttons get a cramped padding by default: 4px 1px */
	padding: 0.25em 0.75em; }

span.link_button {
	cursor: pointer;
	text-decoration: underline; }

span.link_button:hover {
	text-decoration: none; }

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  padding: 3px 5px;
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box; }

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid var(--blue);
  outline: 0; }

/* spacing helpers, to help with:
     - better understand what is needed to create a uniform layout
     - be more flexible with theming
     - project-wide grep
 */
.m-2-0    {margin: 2em 0;}
.m-2-0-1  {margin: 2em 0 1em;}

.mpx-25 {margin: 25px}
.mpx-0-5 {margin: 0 5px}


.flexh, .flexv {
	display: flex; }
.flexh {
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center; }
.flexv {
	flex-direction: column;
	height: 100%; }
.flexh .grow {
	flex: 1;
	display: inline-block; }
.flexh .fixed {
	flex: 0 1 auto;
	display: inline-block; }
.flexv .grow {
	flex: 1; }


html {
    height: 100%;
}

body {
	font-family: var(--font-family-body); 
	line-height: 1.6;
    height: 100%;
	margin: 0;
    color: var(--almost-black);
}

pre {
	white-space: pre-wrap;
}

#wrapper {
	margin: 0 auto;
	/* using padding for this as there are cases where wrapper is 100% height */
	padding-bottom: 30px;

	min-width: 320px;
	/* confortable column size for reading, and a very common phone resolution. */
	max-width: 720px;
}

#wrapper.narrow, #wrapper.narrow #header {
	max-width: 480px;
}

#header {
	width: 100%;
	/* repeat from #wrapper, for cases where we use this with
	   position: fixed */
	max-width: 720px;

	height: 2rem;
	padding: 3px 10px;

	border-radius: 3px;

	color: var(--almost-white);
	background-color: var(--dark-bg-blue); 
	box-shadow: #aaa 0 2px 10px;
	z-index: 2; /* shadow should be over the other default elements */
}

#header > span, #header > a {
    padding: 0 5px 2px;
	color: inherit;
}

#header svg.icon {
	fill: var(--almost-white);
}

#header svg.menu {
    width: 1.5rem;
    margin-top: 3px;
    height: 1.5rem;
}

#header svg.sis_chevron_down {
    margin: -1px 0 0 2px;
}

.flash {
	text-align: center;
	padding: 8px 12px;
	border-radius: 3px;
	color: #000;
}

.flash.top_float {
	position: fixed;
	left: 50%;
	top: 45px;
	box-shadow: #aaa 0 2px 10px;
	display: inline-block;
	width: 300px;
	margin-left: -150px;
	z-index: 15; }

.flash.error {
	background: var(--light-bg-red);
	border:1px solid var(--border-red); }

.flash.notice {
	background: var(--light-green);
	border: 1px solid var(--darker-green); }

.flash .ok {
    margin-left: 25px; }

svg.icon {
	width: 0.9rem;
	height: 0.9rem;
	fill: var(--almost-black);
	vertical-align: middle; }

.clickable {
	cursor: pointer; }

.c.flexh {justify-content: center;}
.c { text-align: center; }
.l { text-align: left; }
.r { text-align: right; }

.note {
    /* note text is smaller relative to parent
       (not small relative to default font size) */
	font-size: 85%;
	color: var(--slightly-gray); }
.note svg.icon {
	fill: var(--slightly-gray); }

.mono {
	font-family: var(--font-family-mono);
	font-size: 12px; }