@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
html {
  /* Palette color codes */
  /* Palette URL: http://paletton.com/#uid=70u0u0kt6sFhZ-3mVuguum--ZhC */
  --color-primary-0: #E47315;
  --color-primary-1: #FFB170;
  --color-primary-2: #F19344;
  --color-primary-3: #B45609;
  --color-primary-4: #8C4000;
  --rgba-primary-0: rgba(228,115, 21,1);
  --rgba-primary-1: rgba(255,177,112,1);
  --rgba-primary-2: rgba(241,147, 68,1);
  --rgba-primary-3: rgba(180, 86, 9,1);
  --rgba-primary-4: rgba(140, 64, 0,1);
  --color-secondary-1-0: #E49F15;
  --color-secondary-1-1: #FFCF70;
  --color-secondary-1-2: #F1B844;
  --color-secondary-1-3: #B47B09;
  --color-secondary-1-4: #8C5E00;
  --rgba-secondary-1-0: rgba(228,159, 21,1);
  --rgba-secondary-1-1: rgba(255,207,112,1);
  --rgba-secondary-1-2: rgba(241,184, 68,1);
  --rgba-secondary-1-3: rgba(180,123, 9,1);
  --rgba-secondary-1-4: rgba(140, 94, 0,1);
  --color-secondary-2-0: #1C4299;
  --color-secondary-2-1: #5A76B5;
  --color-secondary-2-2: #3A59A1;
  --color-secondary-2-3: #123178;
  --color-secondary-2-4: #08225E;
  --rgba-secondary-2-0: rgba( 28, 66,153,1);
  --rgba-secondary-2-1: rgba( 90,118,181,1);
  --rgba-secondary-2-2: rgba( 58, 89,161,1);
  --rgba-secondary-2-3: rgba( 18, 49,120,1);
  --rgba-secondary-2-4: rgba( 8, 34, 94,1);
  --color-complement-0: #0C8989;
  --color-complement-1: #49A6A6;
  --color-complement-2: #299191;
  --color-complement-3: #056C6C;
  --color-complement-4: #005454;
  --rgba-complement-0: rgba( 12,137,137,1);
  --rgba-complement-1: rgba( 73,166,166,1);
  --rgba-complement-2: rgba( 41,145,145,1);
  --rgba-complement-3: rgba( 5,108,108,1);
  --rgba-complement-4: rgba( 0, 84, 84,1);
  --color-gray-0: #f3f3f3;
  --color-gray-2: #d3d3d3;
  --color-gray-4: #9f9f9f;
  --color-gray-8: #303030;
  --color-heading-fg: var(--color-secondary-2-2);
  --color-heading-subtext-fg: var(--color-gray-4);
  --color-text-fg: var(--color-gray-8);
  --color-link-fg: var(--color-secondary-2-2);
  --color-link-fg-hover: var(--color-secondary-2-1);
  /* Thematic Colours */
  --color-error: #cd0a00;
  --color-warning: var(--color-error);
  --color-code: var(--color-error);
  /* Fontes and typefaces */
  --font-body: "PT Sans", sans-serif;
  --font-heading: "PT Sans", sans-serif;
  /* Core Elements */
  --base-border-radius: 5px;
  --header-bg: var(--color-gray-8);
  --header-fg: var(--color-gray-4);
  --header-link-fg: var(--color-gray-2);
  --header-link-fg-hover: var(--color-gray-2);
  --footer-bg: var(--color-gray-8);
  --footer-fg: var(--color-gray-4);
  --footer-link-fg: var(--color-primary-2);
  --footer-link-fg-hover: var(--color-primary-0);
  --raised-color: var(--color-gray-2);
  --icon-button-fb: var(--color-text-fg);
  --icon-button-bg: transparent;
  --card-bg: white;
  --card-border-radius: var(--base-border-radius);
  --card-border: 1px solid var(--color-gray-4);
  /* Forms and Form Fields */
  --form-field-label-fg: var(--color-gray-4);
  --form-field-label-size: 1em;
  --form-field-input-font: var(--font-body);
  --form-field-input-bg: transparent;
  --form-field-input-fg: var(--color-gray-8);
  --form-field-focussed-label-fg: var(--color-secondary-2-0);
  --form-field-invalid-input-fg: var(--color-error);
  --form-field-required-fg: var(--color-gray-4);
  --form-field-error-fg: var(--color-error);
  --input-border: 1px solid var(--color-gray-2);
  --button-fg: white;
  --button-bg: var(--color-gray-8);
  /* Browser custsoms */
  --selection-bg: var(--color-secondary-2-1);
  --selection-fg: var(--color-gray-0);
  /* Third party brands */
  --facebook-brand-color: #3b5998;
  --twitter-brand-color: #1da1f2;
  /* Set the base font-size for the rems */
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  html {
    --block-padding: 2rem;
  }
}

/* Some common mixins */
.card {
  position: relative;
  overflow: hidden;
  background-color: var(--card-bg);
  border-radius: var(--card-border-radius);
  border: var(--card-border);
}
.card > h1:first-child, .card > h2:first-child, .card > h3:first-child, .card > .toolbar:first-child {
  margin: 0;
  padding: 0.5rem;
  margin-bottom: 1rem;
  background-color: var(--card-title-bg);
  color: var(--card-title-fg);
  align-self: stretch;
}

.card-content {
  padding: 1rem;
}

/* Aspect Ratio Mixin */
/* Enable hardware acceleration */
/* Common imports */
/* CSS Resets */
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section, audio, canvas, video {
  display: block;
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  font-size: 100%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

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

b, strong {
  font-weight: bold;
}

abbr[title] {
  border-bottom: 1px dotted;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a img, img {
  -ms-interpolation-mode: bicubic;
  border: 0;
}

input, textarea, button, select {
  margin: 0;
  font-size: 100%;
  line-height: normal;
  vertical-align: baseline;
}

button, html input[type=button], input[type=reset], input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}

input[type=checkbox], input[type=radio] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

textarea {
  overflow: auto;
}

/* These are easy to forget */
::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

/* Make sure to use same rgba used for selection-bg, but with some opacity */
body {
  -webkit-tap-highlight-color: rgba(90, 118, 181, 0.62);
}

/* I really like the iron-flex-layout mixins for applying flex layout.
 * It's simple to understand what the result will be.
 * Unfortunately apply is not supported in plain CSS yet,
 * so I created these sass mixins based of their implementation
 */
/* alignment in cross axis */
/* alignment in main axis */
/* self alignment */
/* multi-line alignment in main axis */
/* Other Layout */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  margin: 1em 0;
  text-transform: capitalize;
  font-family: var(--font-heading);
  color: var(--color-heading-fg);
}
h1 .header-subtext, h2 .header-subtext, h3 .header-subtext, h4 .header-subtext, h5 .header-subtext, h6 .header-subtext {
  font-size: 0.95em;
  color: var(--color-heading-subtext-fg);
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}
h1[no-margin], h2[no-margin], h3[no-margin], h4[no-margin], h5[no-margin], h6[no-margin] {
  margin-bottom: 0;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  font-weight: normal;
}

h2 {
  font-size: 1.3rem;
  font-weight: normal;
}

h3 {
  font-size: 1.2rem;
  font-weight: normal;
}

h4, h5, h6 {
  font-size: 1.1rem;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 2rem;
    margin-bottom: 25px;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.2rem;
  }
  h4, h5, h6 {
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 1024px) {
  h1 {
    font-size: 3rem;
    margin-bottom: 50px;
  }
  h2 {
    font-size: 1.9rem;
  }
  h3 {
    font-size: 1.3rem;
  }
  h4, h5, h6 {
    font-size: 1.1rem;
  }
}
p, ul, ol {
  color: var(--font-color);
  margin-bottom: 1rem;
}

ul, ol {
  margin-left: 1.25em;
}

a {
  color: var(--color-link-fg);
  text-decoration: none;
}
a:hover {
  color: var(--color-link-fg-hover);
}

.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

hr {
  margin: 0 auto;
  max-width: 65%;
}
hr[data-style=empty] {
  border: 0;
  background: transparent;
}

.byline {
  font-size: 0.9em;
}
.byline .subtext {
  color: var(--byline-subtext-fg);
}

article {
  position: relative;
  box-sizing: border-box;
}
article p {
  max-width: 50em;
}

.warning {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: var(--color-warning);
  text-align: center;
}
.warning .warning-icon {
  margin-right: 0.5em;
}
@media screen and (min-width: 768px) {
  .warning {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: left;
  }
}

input, button, select {
  padding: 0.75em;
  border-radius: var(--base-border-radius);
  border: var(--input-border);
}

button, input[type=submit] {
  color: var(--button-fg);
  background-color: var(--button-bg);
  border-radius: var(--base-border-radius);
  margin: 0.5rem;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
button mwc-icon, input[type=submit] mwc-icon {
  margin-right: 0.25em;
  pointer-events: none;
}

form {
  position: relative;
}
form .form-field {
  margin-bottom: 1rem;
}
form label {
  margin: 1.3rem;
}
form .form-field-input {
  margin: 0.5rem;
}
form [slot=help] {
  color: var(--color-gray-4);
  font-size: 0.85em;
  margin-left: 1.3rem;
}

.form-actions {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.error {
  color: var(--color-error);
}

input[name=oauth_url] {
  min-width: 300px;
  width: 100%;
}

#menuPanel {
  z-index: 9999;
}
#menuPanel [slot=content] {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100vh;
  overflow-y: auto;
}
#menuPanel nav ul {
  list-style-type: none;
}
#menuPanel nav li {
  font-size: 1.2rem;
}
#menuPanel nav a, #menuPanel nav a:visited {
  display: block;
  color: var(--color-primary-0);
  padding: 1.1rem;
}
#menuPanel nav a:hover {
  color: var(--color-gray-0);
}
@media screen and (min-width: 768px) {
  #menuPanel nav li {
    font-size: 1.9rem;
  }
  #menuPanel nav a, #menuPanel nav a:visited {
    padding: 1.5rem;
  }
}

#cookiePanel {
  --rich-overlay-bg: rgba(255,255,255,0.95);
  z-index: 9999;
}
#cookiePanel [slot=content] {
  margin: 0 auto;
  max-width: 1024px;
  position: relative;
  box-sizing: border-box;
  height: calc(100vh - 1rem);
  overflow-y: auto;
  overflow-x: visible;
  padding: 1rem;
}
#cookiePanel [slot=content] article {
  margin: 0 auto;
  padding: 1em 0;
}
#cookiePanel .cookie-panel-form {
  width: 100%;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}
#cookiePanel .cookie-panel-form input[type=submit] {
  margin: 0 0 0 2px;
  justify-self: start;
}
@media screen and (min-width: 768px) {
  #cookiePanel .cookie-panel-form {
    grid-template-columns: repeat(4, 1fr);
  }
}
#cookiePanel .cookie-panel-declaration, #cookiePanel cookie-panel-tags {
  position: relative;
  width: 100%;
}
#cookiePanel table {
  font-size: 12px;
  width: 100%;
  margin-top: 1rem;
  border: 2px solid var(--color-gray-0);
}
#cookiePanel th, #cookiePanel td {
  padding: 0.75em;
}
#cookiePanel th {
  text-transform: capitalize;
  text-align: left;
  background-color: var(--color-secondary-2-1);
  color: white;
}
#cookiePanel thead th {
  padding-bottom: 0.25em;
}
#cookiePanel tbody tr {
  background-color: white;
}
#cookiePanel tbody tr:nth-of-type(odd) {
  background-color: var(--color-gray-0);
}

.icon-btn {
  display: inline-block;
  padding: 0.45rem;
  box-sizing: border-box;
  text-align: center;
  color: var(--icon-button-fg);
  background-color: var(--icon-button-bg);
  text-decoration: none;
}
.icon-btn > span {
  vertical-align: middle;
}

header {
  background-color: var(--header-bg);
  color: var(--header-fg);
}
header a {
  color: var(--header-link-fg);
}
header a:hover {
  color: var(--header-link-fg-hover);
}
header .content-wrapper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 1rem;
}
header .header-title {
  font-size: 16px;
  color: var(--color-text-fg);
}
header .header-title span {
  color: var(--color-gray-4);
}
@media screen and (min-width: 425px) {
  header .header-title {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) {
  header .header-title {
    font-size: 26px;
  }
}

.content-wrapper {
  max-width: 1024px;
  margin: 0 auto;
}

.wrapped-cols {
  display: contents;
}

#content {
  position: relative;
}
#content .content-wrapper {
  min-height: 60vh;
  background-color: var(--color-gray-0);
  padding: 1rem 1rem 2rem;
}

footer {
  position: relative;
  z-index: 100;
  background-color: var(--footer-bg);
  color: var(--footer-fg);
}
footer .content-wrapper {
  padding: 3rem 1rem;
}
footer a {
  color: var(--footer-link-fg);
}
footer a:hover {
  color: var(--footer-link-fg-hover);
}
footer nav ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  list-style-type: none;
  margin: 0;
  padding: 2rem 1rem;
}
footer nav li {
  padding: 0.5rem;
}
footer nav a {
  display: inline-block;
  color: var(--color-complement-2);
  padding: 0.5rem;
}
footer nav a:hover {
  color: white;
}
footer .footer-legal, footer .tehnode-attribution {
  margin: 1em 0 0;
  font-size: 12px;
}
@media screen and (min-width: 425px) {
  footer nav ul {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  footer nav li, footer nav a {
    padding: 1rem;
  }
}

/* END footer */
.project-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.project-list-item {
  position: relative;
  overflow: hidden;
  background-color: var(--card-bg);
  border-radius: var(--card-border-radius);
  border: var(--card-border);
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  color: var(--color-text-fg);
  text-decoration: none;
  cursor: pointer;
  padding-right: 1rem;
}
.project-list-item > h1:first-child, .project-list-item > h2:first-child, .project-list-item > h3:first-child, .project-list-item > .toolbar:first-child {
  margin: 0;
  padding: 0.5rem;
  margin-bottom: 1rem;
  background-color: var(--card-title-bg);
  color: var(--card-title-fg);
  align-self: stretch;
}
.project-list-item:visited, .project-list-item:hover {
  color: var(--color-text-fg);
}
.project-list-item .item-text {
  margin: 1rem;
}
.project-list-item .item-text h3 {
  margin: 0;
}
.project-list-item .item-text p {
  margin: 0;
}

.project-detail {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.project-detail .project-overview {
  margin-bottom: 1rem;
}
.project-detail .project-timesheet {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: auto auto auto auto auto;
  grid-template-rows: auto;
  align-items: center;
}
.project-detail .project-timesheet [data-row=banked] input, .project-detail .project-timesheet [data-row=used] input {
  padding-right: 0;
  max-width: 3rem;
}
.project-detail .project-timesheet [data-row=date] {
  display: flex;
  flex-direction: column;
}
.project-detail .project-timesheet [data-row=date] select {
  max-width: 7rem;
}

/* Lets start with the base styles */
body {
  font-family: "Open Sans", sans-serif;
  background-color: var(--color-gray-0);
  background: url("/static/img/cubes.png") repeat var(--color-gray-0);
  color: var(--color-text-fg);
}

[hidden] {
  visibility: hidden !important;
  display: none !important;
}