/**** Header section ****/
html, body, header {
  font-family: 'Roboto', 'Helvetica', 'Ubuntu', sans-serif;
}

html, body {
  width: 100vw;
  max-width: 100%;
  overflow-x: hidden;
  /* padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right); */
}

html {
  padding: env(safe-area-inset);
}

/* * {
  outline: 1px solid red;
} */

/* 
body {
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
} */

.mdl-layout__tab-bar
{
  overflow: visible !important;
}

.mdl-layout__content {
  /* margin-top: -35vh; */
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  padding-left: 42px;
  padding-top: 42px;
  padding-right: 42px;
}

.mdl-layout.is-small-screen .material-icons {
  color:rgba(66,66,66) !important;
}

.mdl-layout.is-small-screen .mdl-layout__content {
  padding-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
}

.mdl-layout-title
{
  font-family: 'Ubuntu';
  font-size: 30px;
}

a.TitleLink
{
  font-family: 'Ubuntu';
  font-size: 30px;
  text-decoration: none;
  color: white;
}

.mdl-card__post
{
  border-radius: 2px;
  padding: 80px 56px;
  margin-bottom: 80px;
  background-color: white;
}

/**** Navigation drawer section ****/

.mdl-navigation
{
  font-family: 'Ubuntu';
  text-align: right;
}

.android-drawer-separator {
  height: 1px;
  background-color: #dcdcdc;
  margin: 8px 0;
}

.mdl-card__heading {
  background-color:rgb(255,171,64, 0.9);
  background-repeat:repeat;
  background-position:50% 50%;
  background-size:cover;
  background-origin:padding-box;
  background-attachment:scroll;
  box-sizing: border-box;
  background-size: cover;
  padding: 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

/**** Grid section ****/

.demo-blog__posts {
  max-width: 900px;
  padding: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin: 0 auto;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

/**** Card section ****/

.mdl-card__title-text {
  /* font-family: 'Roboto'; */
  box-sizing: border-box;
  background-size: cover;
  padding: 8px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

h3 > a
{
  color:rgba(66,66,66);
  font-weight: 400;
  font-family: 'Roboto';
  text-decoration: none;
}

.mdl-card__title
{
  color:rgba(66,66,66);
  /* color: black; */
  font-weight: 400;
  font-family: 'Roboto';
}

.mdl-card__date {

  /* display: flex; */
  margin: auto;
  font-size: 14px;
  color:rgba(66,66,66, .85);
  text-align: right;
}

.mdl-card__date-left {

  /* display: flex; */
  margin: auto;
  font-size: 14px;
  color: #595F72;
  text-align: left;
}

.mdl-card__supporting-chips
{
  text-align: right;
  padding: 16px;
}

.mdl-card__supporting-text
{
  padding-left: 24px;
  color:rgba(116, 114, 113)
}

.mdl-card__supporting-text > a
{
  color: blue;
}

.mdl-chip
{
  background-color:#dededeb6;
  cursor: default;
  /* background-color:rgb(255,171,64, 0.9); */
}

.seethrough-card {
  background-color: rgba(255, 255, 255, .98);
}

.seethrough-card .mdl-card__media {
  background:none;
}

.mdl-card__media img {
  max-width: 100%;   /* responsive but respects inline width/max-width */
  height: auto;      /* keeps aspect ratio */
  display: block;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

.mdl-card__actions{
  text-align: right;
  padding:0px;
}


/**** Post section ****/

.post-container
{
  max-width: 1600px;
  /* min-width: 1200px; */
  width: calc(100% - 16px);
  margin: 0 auto;
}

@media only screen and (orientation: portrait) {
  .game-container {
    height: 45vh;
    max-width: 100%;
  }
}

@media only screen and (orientation: landscape) {
  .game-container {
    width: 55%;
    height: 100vh;
  }
}

canvas#unity-canvas {
    width: 100% !important;
    height: 100% !important;
}

figure {
  display: table;
}

figure img {
  display: block;
  margin: 0;              /* let the figure handle alignment */
}

figcaption {
  display: table-caption;
  caption-side: bottom;   /* put caption under the image */
  text-align: left;
  font-size: 0.9em;
  color: #666;
  margin-top: 0.3em;
}

.post-content {
  max-width: 1000px;
  border-radius: 2px;
  padding: 20px 125px 80px;
  margin-bottom: 80px;
}

.post-content h3 {
  margin-top: 48px;
}

.post-content .mdl-card__media {
  background:none;
  /* prevent img from overflowing */
  overflow:hidden;
}

.mdl-layout.is-small-screen .post-content {
  padding: 40px 28px;
}

.vehicle-chips {
  margin-bottom: 25px;
  margin-top: 10px;
}

/**** Dashboard1 section ****/

.dashboard-card {
  border-radius: 2px;
  padding: 20px 20px 20px;
  /* margin-bottom: 80px; */
}

.dashboard-card-holder {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}

.dashboard-card-holder .dashboard-card-separator {
  height: 16px;
}

.spinner-holder {
  display: flex;
  justify-content: center;
}

@media (min-width: 1500px) {
  .mdl-grid.dashboard-container {
    max-width: none;      /* or a custom cap, e.g. 1800px */
    margin: 0 50px;       /* keep your side gutters */
  }
}

/**** Tablet layout ****/
@media (max-width: 1500px) {
  .mdl-grid
  {
    padding: 0px;
    /* margin: 0px; */
  }

  .mdl-grid.mdl-grid--no-spacing
  {
    margin:4px;
  }

  .mdl-grid.dashboard-container
  {
    padding: 0px;
    margin: 0px;
    width: 100%;
  }

  .dashboard-card-holder
  {
    margin-top: 8px;
  }

  .dashboard-card {
    margin: 4px;
    padding: 15px 15px 15px;
  }

  .dashboard-card-holder .dashboard-card-separator {
    height: 8px;
  }
}


/**** Mobile layout ****/
@media (max-width: 836px), (max-height: 836px){
  .mdl-grid
  {
    width: 100%;
    padding: 0px;
    margin: 0px;
  }

  .mdl-grid.mdl-grid--no-spacing
  {
    /* padding-left: 8px; */
    padding-right: 8px; 
    width: 100%;
  }



  .mdl-grid.dashboard-container
  {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }

  .dashboard-card-holder
  {
    margin: 0px;
  }

  .mdl-layout__tab-bar
  {
    display: none;
  }

  .low-prio-card
  {
    display: none;
  }

  .mdl-layout__tab-bar-container{
    height: 0px;
  }

  .mdl-layout__header-row
  {
    background:rgb(244,67,54);
  }

  .mdl-layout.is-small-screen .mdl-layout__drawer-button {
    /* doesn't work on small screens */
    color: white;
  }

  .mdl-layout__header-row .mdl-navigation
  {
    display: none;
  }

  .mdl-layout__tab-bar-right-button, .mdl-layout__tab-bar-left-button
  {
    display:none;
  }


}