/**
 * demok2.css
 * Copyright 2015 Google Inc. All Rights Reserved.
 * Copyright 2016, 2017 Demokratio
 * Rev 1.1 0.2 28Nov19
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*****************/
/*
Este body aplica para página web!
body {
  background: lightblue;
}*/
/* y este solo a app */
body {
  color: black;
}
.mdl-layout__header-row .mdl-button--icon {
  width: 36px;
  height: 36px;
}
.demokForm1 {
/*  padding: 10px;
  margin : 5px;*/
}
.demokForm2 {
  border: 1px solid powderblue;
  padding: 20px;
  margin : 20px;
}
#loginGForm {
  border: 1px solid powderblue;
  padding: 30px;
  margin : 20px auto;
  text-align: center;
  max-width: 450px;
  }
#emailLoginForm {
  border: 1px solid powderblue;
  padding: 30px;
  margin : 20px auto;
  text-align: center;
  max-width: 450px;
  }
#Copyright {
      padding: 0px 30px 0px 30px;
      margin : 0px 20px 0px 20px;
    }
.errorMsg {
    max-width: 600px;
    padding: 2px 10px;
    color:red;
    margin: 10px;
    border: 10px;
  }
/*    #createEmailButton, #resetEmailButton {*/
.linkButton {
  color:blue;
  background-color:white;
  border-color:white;
}

.linkButton:hover {
      color:black;
}

#Copyright {
    color: blue;
    margin: 20px auto;
    text-align: center;
    max-width: 450px;
  }
.a:link .a:visited .a:hover .a:active {
  color:blue; 
  background-color:transparent; 
  text-decoration: none;
}

.GoogleButton {
  width: 200px;
  height: 50px;
  margin: 0px;
  padding: 0px;
  border: 0px; 
  }

.inputBox {
    font-size: 14px;
    padding: 5px;
    margin: 5px 0px; 
}
.group-card.mdl-card, .event-card.mdl-card {
  width: 320px;
  cursor:pointer;
  min-height: 100px;
  min-width: 180px 
}
/*.group-card > .mdl-card__supporting-text {
  flex-grow: 1;
}*/
/*.group-card > .mdl-card__title {
  color: #fff;
  height: 176px;
}*/
.group-card > .mdl-card__menu {
  color: #fff;
}
table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;}
table, td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
  }
/* PC */
@media (max-width: 1400px) {
  .group-card.mdl-card, .event-card.mdl-card {
    width: calc(100% *1/4 - 20px);
  }
}
/* tablet */
@media (max-width: 900px) {
  .group-card.mdl-card, .event-card.mdl-card {
    width: calc(100% *1/3 - 20px);
  }
}
/* phone landscape */
@media (max-width: 600px) {
  .group-card.mdl-card, .event-card.mdl-card {
    width: calc(100% *1/2 - 20px);
  }
}
/* phone portrait*/
@media (max-width: 400px) {
  .group-card.mdl-card, .event-card.mdl-card {
    width: calc(100% - 20px);
  }
}

/* http://stackoverflow.com/questions/31304232/how-can-i-make-header-scrollable-for-smaller-screens-in-mdl */
@media screen and (max-width: 1200px) {
    .mdl-layout__header {
        display: block;
    }
}
.mdl-mini-footer__social-btn {
    border-radius: 5px;
    overflow: hidden;
    cursor:pointer;
  }
.demokFlag {
  display: flex;
  align-items: center;
  justify-content: center;
  }