html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  background: #e0e0e0;
}
a {
  text-decoration: underline;
  color: #039BE5;
}
.mdl-menu a {
  text-decoration: none;
}
.mdl-menu {
	padding: 0;
}
.mdl-card {
  display: block;
  background: #eee;
}
/* Theatre mode */
.fp-theatre {
  display: none;
  background: rgba(255, 255, 255, 0.8);
  padding: 30px;
  text-align: center;
  box-sizing: border-box;
  vertical-align: middle;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.fp-fullpic {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-sizing: border-box;
}
/* Fixes an MDL bug where the header does not scroll on small devices */
.mdl-layout__container .mdl-layout--fixed-header .mdl-layout__content {
  overflow-y: visible;
  overflow-x: visible;
  overflow: visible;
}
/* Overrides MDL colors */
.mdl-layout.is-upgraded .mdl-layout__tab.is-active::after,
.fp-header .mdl-textfield__label:after {
  background-color: #afaead;
}
.mdl-snackbar__action {
  color: #FFCA28;
}
.mdl-textfield__label:after {
  background-color: #0288D1;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
  color: #0288D1;
}

.fp-content, .mdl-layout__header-row, .mdl-tab {
	max-width: 1280px;
}



/* Header */
.mdl-layout__header, .fp-logos {
background: url('../images/logo.svg') no-repeat center center;
box-shadow: none;
}	


.fp-logo a {
  color: white;
  text-decoration: none;
}

.fp-logo .material-icons {
  top: 4px;
  font-size: 28px;
  margin-right: -2px;
  position: relative;
}

.fp-header .mdl-layout__header-row {
    width: 100%;
    height: auto;
    padding: 150px 25px 0px 25px;
    margin: auto;
    position: relative;
}



.fp-titlebar h3 {
	margin-left: 12px;
	font-size: 26px;
	font-weight: 400;
	opacity: .6;
}

  .mdl-layout__tab {
	padding: 0 25px;
}


.auth {
	float: right;
	margin-right: 120px;
}

@media screen and (max-width: 540px) {

  .mdl-grid {
    padding: 0;
  }
  .mdl-card {
    font-size: 14px;
  }

.fp-header .mdl-layout__header-row {
	padding: 90px 10px 0 0;
  
}
  .mdl-layout__tab {
	padding: 0 15px;
}



}





/* Signed-in user */

.fp-signed-in-user-container {
  display: none;
  margin-left: 10px;
}
.fp-avatar {
  height: 28px;
  width: 28px;
  display: inline-block;
  background-size: 28px 28px;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  margin-top: 2px;

}
.fp-username {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  text-transform: capitalize;
}
.fp-usernamelink {
  border-radius: 20px;

  white-space: nowrap;

}
.mdl-layout__drawer .fp-signed-in-user-container {
  margin: 0;
  padding: 16px;
  height: 44px;
}
.mdl-layout__drawer .fp-signed-in-user-container .fp-avatar {
  height: 40px;
  width: 40px;
  background-size: 40px 40px;
  border-radius: 40px;
  margin-right: 15px;
}
.mdl-layout__drawer .fp-signed-in-user-container .fp-username {
  font-size: 16px;
  line-height: 48px;
}
.mdl-layout__drawer .fp-sign-in-button {
  margin: 10px 0 0 0;
}

.fp-sign-in-button {
  color: white;

}



.mdl-layout__drawer .fp-sign-in-button {
  color: black;
}
.mdl-button .material-icons {
  margin-top: -2px;
}
.mdl-button.mdl-button--icon .material-icons,
.mdl-button.mdl-button--fab .material-icons {
  margin-top: 0;
}

/* Navigation Bar */

.fp-header .mdl-tab {
  width: 1280px;
  height: 100%;
  padding: 0;
  overflow: visible;
  position: relative;
  margin: auto;
}
.fp-header .fp-tab {
  padding: 0;
  max-width: none;
}


#fp-mediacapture {
  transform: scale(0.0001);
  opacity: 0;
}

.mdl-tab {
	left: 0;
	right: 0;
}

/* Drawer */

.mdl-layout__drawer-button {
  display: none;
}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link.is-active,
.is-active .mdl-menu__item {
  color: black;
  background-color: #EBEBEB;
}
.mdl-layout__drawer {
  border-right-width: 0;
}
.mdl-navigation__link .material-icons, .mdl-menu__item .material-icons {
  position: relative;
  margin-top: -2px;
  margin-right: 10px;

}
.mdl-menu__item .material-icons {
  top: 7px;
  color: #9b9b9b;
  
}
.mdl-menu__item {
  color: #777;
  padding: 0 12px;
}





.start-center {
	width: 267px;
	height: 310px;
    position: absolute;
    margin: 0 auto;
    left: 50%;
    right: 50%;
	top: 50%;
	bottom: 50%;
	transform: translate(-50%, -50%);
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="266" height="310" viewBox="481 382 266 310"><path fill="#8F5138" d="M746.4 487.2c0 21.6-17.4 39-39 39-21.5 0-39-17.4-39-39 0-21.5 17.5-39 39-39 21.6 0 39 17.5 39 39z"/><path fill="#FFF" d="M714.6 501.2l8 7.8v.2l6.6-6.8-8-8c4.2-7 3.2-16.2-3-22-3.3-3.6-8-5.4-13-5.4s-9.5 1.8-13 5.3c-7.2 7.2-7.2 18.8 0 26 3.5 3.4 8 5.4 13 5.4 3.5 0 6.6-1 9.4-2.5z"/><path fill="#8F5138" d="M705.3 475.5c-5.4 0-9.8 4.4-9.8 9.8s4.4 9.7 9.8 9.7 9.8-4.3 9.8-9.7c0-5.4-4.2-9.8-9.6-9.8z"/><path fill="#08F" d="M522.4 598.6c-22.6 0-41-18.4-41-41 0-22.8 18.4-41 41-41 22.7 0 41 18.2 41 41 0 22.6-18.3 41-41 41z"/><path fill="#FFF" d="M504.6 548.6l3-4.3c3.6-4.3 9-7 15.4-7 5 0 9.6 2 13.3 5l-6 6c-2-1.7-4.5-2.7-7.5-2.7-2.6 0-5 .8-7 2.2-2 1.5-3.5 3.6-4.3 6-.5 1-.5 2.2-.5 3.2v1.2c0 1.2 0 2.2.5 3.2.8 2.4 2.3 4.3 4.2 5.8l2.8 1.5c1.4.5 2.8.8 4.4.8 2.6 0 4.8-.6 6.6-1.8v.2l6.3 5c-2.3 2-5 3.4-8 4-1.6.6-3.5.8-5.2.8-6.2 0-11.7-2.7-15.4-7-1-1.3-2-2.7-2.8-4.3-1.2-2.5-2-5.5-2-8.4v-1c0-3 .8-5.8 2-8.4zm37.2 5.2h-19v8h11c-.6 2.5-2 4.6-4.2 6l6.5 5c2-1.7 3.5-3.8 4.5-6 1.2-2.8 1.8-5.8 1.8-9.3 0-1.2 0-2.5-.4-3.7h-.2z"/><path fill="#3EB655" d="M546 504c21 0 38-17 38-38s-17-38-38-38-38 17-38 38 17 38 38 38z"/><path fill="#FFF" d="M541.6 461h-9.4l14 12.3 14.2-12.2H551v-12h-9.4v12zM530 476.6v7.3h32.6v-7.5H530z"/><path fill="#686DFF" d="M698.3 593.5c0 22.3-18 40.4-40.4 40.4-22.5 0-40.6-18.3-40.6-40.6s18-40.4 40.4-40.4c22.2 0 40.3 18.2 40.3 40.5h.3z"/><path fill="#FFF" d="M661.8 581.5V580l.5-1 1-.6h6.4v-8h-7c-4 0-7 .7-8.7 2.5-1.8 1.5-2.7 4-2.7 7.5v5H646v8h5.3v23h10.5v-23h7l1-8h-8v-4z"/><path fill="#FF0068" d="M657 429.7c0 26.2-21.3 47.5-47.5 47.5-26.3 0-47.5-21.3-47.5-47.5s21.2-47.5 47.5-47.5c26.2 0 47.4 21.3 47.4 47.5z"/><path fill="#FFF" d="M597.5 408c-6.2 2.2-10.4 7-11.5 13.2-.7 4.4-.5 8.4 1.3 12l1.3 2.4c0 .4.7.6 1 1 .6 0 1-.4 1.5-.8 2.4-1 4-3 5.7-4.4-6-7 0-15.5 8-17.7 7.4-1.5 17.3 1.6 19.6 8.8.8 3.3.4 6.7-2.3 9-1.4 1.4-3 2-5 2.5h-4.8c-1-.4-2.2-.4-2.2-1.5v-12.2c0-1 .5-.6-.4-1H608c-2.2 0-4-.3-6 0-.6 0-.8 0-.8 1v6c0 4.8.4 9.7 0 14.3 0 1.4 0 4.4-1.3 5.3-2 .3-3.5-1.3-5.3-1.7 0 2.2-1 7 1.6 8 2.2 1.2 5.2 1.7 8 .8 5.4-2 7.2-8 6.5-13 8.3 2.5 17.6-1.7 21-9.4 2.3-5 1.4-12-2-16.6-7.6-8.7-22.2-10.2-32.8-6h.5z"/><g><path fill="#00BCD4" d="M697 529.4c0 15.5-12.7 28-28.2 28s-28-12.5-28-28 12.5-28 28-28 28 12.5 28 28h.2z"/><path fill="#FFF" d="M673.3 533.8h9v-9h-9v-9h-9v9h-9v9h9v9h9"/></g><g><path fill="#B76A56" d="M660 527.3c0 32-26 58-58 58s-58-26-58-58 26-58 58-58 58 26 58 58z"/><path fill="#FF8E14" d="M634 515.6c0 11.2-9 20.3-20.2 20.3s-20.3-9.3-20.3-20.5 9-20.3 20.3-20.3c11.2 0 20.3 9 20.3 20.3z"/><path fill="#FFEB3B" d="M576.8 519.4h31.7c1 0 2 .8 2 1.8V553c0 1-1 1.8-2 1.8h-31.7c-1 0-1.8-1-1.8-2v-31.6c0-1 .8-1.8 1.8-1.8z"/></g></svg>') no-repeat center center;
}


/* New Post Page */

#page-add {
  display: block;
  text-align: center;
}
#page-add .mdl-cell {
  width: auto;
  min-width: 300px;
}
.fp-addcontainer .mdl-card__supporting-text {
  padding-top: 0;
  width: auto;
}
#newPictureContainer {
  margin: 0;
  max-width: 100%;
  max-height: 400px;
}
.fp-content .mdl-cell .fp-addcontainer {
  margin: auto;
  max-width: 800px;
  display: block;
  text-align: center;
}
#page-add .fp-addcontainer .fp-overlay {
  opacity: 0.7;
}
#page-add .fp-overlay i {
  font-size: 50px;
}
@media screen and (max-width: 479px) {
  .mdl-snackbar__action {
    margin-right: 60px;
  }
}

/* User Info page */




.fp-user-avatar {
  width: 96px;
  height: 96px;
  display: inline-block;
  background-size: cover;
  background-position: 50% 50%;
  margin-left: 20px;
  border-radius: 50%;
}
.fp-user-username {
  font-size: 30px;
  font-weight: 300;
  white-space: nowrap;
  width: 100%;
}
.fp-user-container,
.fp-user-following {
  min-height: 150px;
  height: 150px;
  flex-direction: row;
  align-items: center;
  text-align: right;
  margin: 23px 25px 0 24px;
  display: flex;
  background: rgba(255, 255, 255, 0.27);
  font-size: 16px;
  font-weight: 400;
}
.fp-user-following {
  display: none;
  padding: 30px 10px 10px 10px;
  overflow: visible;
  margin-top: 35px;
  height: auto;
  min-height: 50px;
  text-align: left;
  width: 100%;
}
.fp-user-following .fp-usernamelink {
  margin: 10px;
  box-sizing: border-box;
}
.fp-follow {
  width: 120px;
  text-align: left;
  margin-top: 20px;
}
.fp-name-follow-container {
  margin-left: 5%;
  display: flex;
  flex-direction: column;
  text-align: left;
}
#page-user-info .fp-image .likes {
  margin-left: 3px;
  margin-right: 20px;
}
#page-user-info .fp-image .comments {
  margin-left: 3px;
}
#page-user-info .fp-user-detail-container {
  display: flex;
  margin-top: 15px;
}
#page-user-info .fp-user-detail {
  margin-right: 15px;
  white-space: nowrap;
  opacity: 0.6;
}
#page-user-info .fp-user-nbposts,
#page-user-info .fp-user-nbfollowers,
#page-user-info .fp-user-nbfollowing {
  font-weight: bold;
}
#page-user-info .fp-user-detail.is-active {
  border-bottom: 2px #d0d0d0 solid;
  padding: 5px 5px 3px 5px;
  margin: -5px 10px -5px -5px;
  opacity: 1;
}
#page-user-info .fp-no-posts .mdl-card {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: #555;
}
#page-user-info .fp-user-nbfollowing-container:HOVER {
  cursor: pointer;
  background-color: #fafafa;
  border-radius: 5px;
  padding: 5px;
  margin: -5px 10px -5px -5px;
  border-bottom: none;
}
#page-user-info .fp-user-nbfollowing-container.is-active:HOVER {
  border-bottom: 2px #c3c3c3 solid;
  padding: 5px 5px 3px 5px;
  margin: -5px 10px -5px -5px;
  border-radius: 5px 5px 0 0;
}
.fp-close-following {
  top: -28px;
  background-color: #eee;
  left: calc(50% - 28px);
  position: absolute;
  z-index: 1;
}
.fp-close-following:HOVER {
  background-color: #ddd;
}
@media screen and (max-width: 479px) {
  .fp-name-follow-container {
    margin-left: 5%;
  }
  .fp-user-username {
    font-size: 20px;
  }
  .fp-sign-out {
    margin-left: 180px;
}
  
  .fp-user-avatar {
    margin-left: 5px;
    background-size: 50px 50px;
    background-position: center center bottom;
    background-repeat: no-repeat;
  }
  .fp-user-container {
    min-height: 100px;
    height: 100px;
    margin: 16px 16px 0 16px;
  }
  .fp-user-following {
    margin: 35px 16px 0 16px;
  }
  .fp-follow {
    margin-top: 10px;
  }
  #page-user-info .fp-user-detail-container {
    margin-top: 10px;
  }
  #page-user-info .fp-user-detail {
    font-size: 13px;
  }
    #fp-menu {
	margin-right: 0;
}
}

/* User Info photo cards */

#page-user-info .fp-image {
  position: relative;
  cursor: pointer;
}
#page-user-info .fp-image img {
  height: 100%;
  width: 100%;
}
#page-user-info .fp-overlay,
#page-add .fp-overlay {
  opacity: 0;
  background-color: #00bcd4;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: opacity .2s linear;
}
#page-user-info .fp-overlay:HOVER {
  opacity: 0.9;
  transition: opacity .2s linear;
}
#page-user-info .fp-image .mdl-card {
  max-height: 150px;
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  justify-content: flex-end;
}
.fp-overlay .fp-pic-text {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: #fff;
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 5px;
  box-sizing: border-box;
  font-size: 24px;
}

.mdl-switch.is-checked .mdl-switch__thumb {
    background: #24b375;
   }
   
   .mdl-switch.is-checked .mdl-switch__track {
    background: rgba(36, 179, 117, 0.22);
}

.mdl-switch__ripple-container .mdl-ripple {
    background: #5c5c5c;
}

/* Post */

.homefeed {
	padding-left: 15px;
	padding-right: 15px;
	color: gray;
	
}
.homefee {
	text-align: center;
}

.mdl-textfield__label:after {
	background-color: #263238;
}

.fp-post .mdl-card {
  height: 100%;
  top: 0;
  left: 0;
}
.fp-post .fp-image {
  flex: 1;
  background-position: center top;
  box-sizing: border-box;
  padding-top: 25%;
  position: relative;
  padding-bottom: 25%;
  cursor: pointer;
  background-repeat: no-repeat;
}
@media screen and (max-width: 840px) {
  .fp-post .fp-image {
    padding-top: 35%;
    padding-bottom: 35%;
  }
}
.fp-post .fp-header {
  padding: 10px;
  
}
.fp-post .fp-time {
  float: right;
  color: grey;
  margin-top: 7px;
  font-size: 14px;
  margin-right: 15px;
}



.fp-post .fp-comments {
  padding: 0 10px 0 10px;
}
.fp-post .fp-first-comment {
    display: inline-block;
    vertical-align: top;
	margin: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    border-radius: 20px;
    font-size: 18px;
    color: #404040;
    font-weight: 400;
}
.fp-post .fp-comments .fp-author,
.fp-post .fp-first-comment .fp-author {
  text-decoration: none;
  color: gray;
  font-size: 12px;
  font-weight: normal;
  padding: 3px 10px 3px 6px;
  margin: 0 -10px 0 -6px;
}
.fp-post .fp-comments .fp-author:HOVER,
.fp-post .fp-first-comment .fp-author:HOVER {
  color: #263238;
}
.fp-post .fp-comments .fp-text {
  margin-left: 5px;
  color: #444;
  transition: all 0.2s;
}
.fp-post .fp-action {
  padding: 0 10px 0 10px;
  display: flex;
  flex-direction: row;
  margin-bottom: -10px;
  margin-top: 20px;
}
.fp-post .fp-action .fp-add-comment {
  flex-grow: 1;
}
.fp-post .fp-action .fp-add-comment .mdl-textfield {
  width: 100%;
}
.fp-post .fp-action .fp-like .material-icons {
  font-size: 35px;
  color: #0088ff;
  margin-right: 10px;
  padding-top: 18px;
  cursor: pointer;
}
.fp-post .fp-action .fp-like .material-icons:HOVER {
  color: #24b375;
}
.fp-post .fp-action .fp-like .fp-liked {
  display: none;
}
.fp-next-page-button {
  width: 100%;
  margin-bottom: 15px;
  text-align: center;
}
.fp-new-posts-button {
  width: 100%;
  display: flex;
  justify-content: center;
}
.fp-next-page-button button,
.fp-new-posts-button button {
  display: none;
}
.fp-new-posts-button button {
  margin-top: 15px;
  border-radius: 10px;
  text-transform: none;
  font-weight: normal;
}
.fp-delete-post {
  float: right;
  color: #f40058;
  font-size: 12px;
  margin-right: -5px;
  display: none;
  border-radius: 20px;
  font-weight: 600;
}

/* Splash Page */



.center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
          z-index: 99999;
}



@-webkit-keyframes scrollGood {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -320px, 0);
            transform: translate3d(0, -320px, 0);
  }
}
@keyframes scrollGood {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -320px, 0);
            transform: translate3d(0, -320px, 0);
  }
}

.ani {
	background-image:url('../images/bg.png');
  background-position: center center;
  background-size: 500px;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 400%;
  width: 100%;
  z-index: 1;
  -webkit-animation: scrollGood 5s linear infinite;
  animation: scrollGood 5s linear infinite;
}









#page-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #683ab7;

  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  flex-direction: column;
}
#page-splash .fp-caption {
  margin: 20px 0 40px 0;

  font-size: 18px;
  opacity: 0.8;
}
#page-splash .fp-skip {
  font-weight:lighter;
  color:white;
  width: 100%;
  display: block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 10px;
}
#page-splash .fp-skip:HOVER {
  color: gray;
}
.fp-help {
  margin-left: auto;
  margin-right: auto;
}
.fp-help p {
  font-size: 16px;
}
.fp-help .mdl-card__supporting-text {
  display: flex;
  width: 100%;
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}
.fp-help .fp-info {
  font-size: 60px;
  padding-right: 30px;
  min-width: 60px;
}
.fp-help p .material-icons {
  top: 7px;
  position: relative;
  margin-right: 3px;
}
.fp-no-posts {
  display: none;
}

/* Search */

::-webkit-input-placeholder {color:#fff;}
::-moz-placeholder          {color:#fff;}
:-moz-placeholder           {color:#fff;}
:-ms-input-placeholder      {color:#fff;}

@media screen and (max-width: 840px) {
  .fp-searchcontainer {
    max-width: 140px;
    margin-left: 20px;
  }
  .fp-searchcontainer #fp-searchResults {
    width: calc(100% + 90px);
  }
}
.fp-searchcontainer {
  margin-top: 4px;
  position: relative;
}
#fp-searchResults {
  display: none;
  position: absolute;
  padding: 5px;
  min-height: 0;
  opacity: 0.8;
  width: 100%;
  overflow: hidden;
}
@media screen and (max-width: 480px) {
  .fp-searchcontainer {
    max-width: calc(100% - 195px);
    margin-left: 10px;
  }
  #fp-searchResults {
    width: calc(100% + 70px);
    left: -50px;
  }
}
.fp-searchResultItem.fp-usernamelink {
  position: relative;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding-right:0;
  display: block;
}
#fp-searchResults .fp-searchResultItem .fp-username{
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 50px);
  overflow: hidden;
}

/* Misc */

.fp-initially-hidden {
  display: none;
}
.mdl-snackbar {
  z-index: 101;
}

/* Firebase UI styling */

.firebaseui-id-page-callback {
  background: transparent;
  box-shadow: none;
  margin-top: 40px;
  height: 84px;
  min-height: 0;
}
.firebaseui-id-page-federated-linking {
  background: rgba(0,0,0,0.05);
  margin-bottom: 15px;
  min-height: 150px;
  padding-top: 10px;
  border-radius: 20px;
  box-shadow: none;
}
.firebaseui-card-header {
  display: none;
}
.firebaseui-subtitle, .firebaseui-text {
  color: rgba(255,255,255,0.87);
}

.firebaseui-card-content {
    padding: 24px;
}

.firebaseui-id-dismiss-info-bar {
  display: block;
}
.firebaseui-info-bar {
  border: 0;
  border-radius: 10px;
  left: 5%;
  right: 5%;
  top: 10%;
  bottom: 10%;
}

/* Firebase UI MDL fixes */

.mdl-layout__tab {
  height: 48px;
  line-height: 48px;
  
  color: #9e9e9e;
  border-radius: 0;
}
.mdl-menu__item a {
	colo: gray;
}

.mdl-layout.is-upgraded .mdl-layout__tab.is-active {
    color: #808080;
}

.demo-card-wide.mdl-card {
  max-width: 512px;
  width: auto;
  margin: 0 auto;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}



.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px; }
  .mdl-dialog__title {
    padding: 24px 24px 0;
    margin: 0;
    font-size: 2.5rem; }
  .mdl-dialog__actions {
    padding: 8px 8px 8px 24px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .mdl-dialog__actions > * {
      margin-right: 8px;
      height: 36px; }
      .mdl-dialog__actions > *:first-child {
        margin-right: 0; }
    .mdl-dialog__actions--full-width {
      padding: 0 0 8px 0; }
      .mdl-dialog__actions--full-width > * {
        height: 48px;
        -webkit-flex: 0 0 100%;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        padding-right: 16px;
        margin-right: 0;
        text-align: right; }
  .mdl-dialog__content {
    padding: 20px 24px 24px 24px;
    color: rgba(0,0,0, 0.54); }