/* You can add global styles to this file, and also import other style files */
/* typefaces */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800|Open+Sans|Work+Sans:300,400,500,600,700,800|Quicksand:300,400,700|Source+Code+Pro:300,400');
/* icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
/* app style assets */
@import "assets/style/all";
@import "~sass-mq";

@include mat-core();


html, body {
  background-color: #eff2f4;
  margin: 0;
  display: block;
  height: 100%;
  position: relative;
  font-family: $civ-font-family;
  font-weight: 400;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  @include mq($until: tablet) {
    font-size: 14px;
  }

  @include mq($from: tablet, $until: desktop) {
    font-size: 16px;
  }

}

a.button{
  text-transform: uppercase;
}

.main{
  max-width:1000px;
  margin:auto;
  padding:0 8px;
}

footer, footer md-grid-list, .inverse, .footer{
  background-color:#263238;
  color:#ffffff;
}

div.footer{
  margin-bottom: 0 !important;

  .main-footer{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  a{
    color:#fff;
    text-decoration: none;
    font-size: .85em;
    font-weight: 200;
  }

  md-icon{
    font-size: 2em;
    margin: 0 10px;
  }

}

.copyright{
  display: flex;
  justify-content: flex-end;
  font-size: .75em;

  div{
    margin:20px 40px;
  }
}

.lead{
  font-weight:300;
  font-size:1.5em;
}

.center{
  text-align: center;
}

.no-bullet, ul.no-bullet li{
  list-style-type: none;
}

.item-container, .meeting-row {
  max-width: 900px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
  background-color:#ffffff;
}

.focus-title.title, .place-title{
  font-family: 'Roboto', sans-serif;
  color: #373737;
  font-weight: 700;
}

.meeting-title{
  line-height: .8em;
}


civ-meeting-container{
  margin:0 auto;
  max-width: 900px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
  background-color:#ffffff;
}



@include angular-material-theme($civ-theme);

.font-override { // body or wrapper class
  .mat-button-toggle,
  %mat-button-base,
  .mat-button,
  .mat-raised-button,
  .mat-fab,
  .mat-icon-button,
  .mat-mini-fab,
  .mat-card,
  .mat-checkbox,
  .mat-input-container,
  .mat-list,
  .mat-menu-item,
  .mat-radio-button,
  .mat-select,
  .mat-list .mat-list-item .mat-list-item-content,
  .mat-nav-list .mat-list-item .mat-list-item-content,
  .mat-simple-snackbar,
  .mat-tab-label,
  .mat-slide-toggle-content,
  .mat-toolbar,
  .mat-tooltip {
    font-family: $civ-font-family;
  }
}