/* remove focus outline */
*:focus {outline:none}

md-dialog{
  max-width: 350px;
  /*width: 50vw;*/
}


.card {
  box-shadow: none;
  /*width: 50vw;*/
}

.card md-card-title-media {
  /*max-width: 400px;*/
  /*width: 80%;*/
  /*background-color: ghostWhite;*/
  text-align: center;
  margin: 0;
}

.routeContainer {
  width: 100%;
  text-align: center;
  overflow-y: auto;
}

md-card md-card-content .md-media-xl {
    height: 300px;
    width: 300px;
}

md-list-item{
  background-color: ghostWhite;
}
/*
md-card-actions md-button{
  margin: 0 !important;
}*/

/* remove annoying margin when the layout of card actions buttons changed from row to col*/
/*md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button), md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button) {
    margin: 0;
}*/

.dialogRoute {
  width: 100%;
  padding: 5px;

  /*color:red;*/
  /*border: 1px solid black;
  border-radius: 10px;*/
}

.dialogRoute>div{
  display:flex;
  /* separate route and time */
  justify-content: space-between;
}

.noRoutes{
  display: flex;
  height: 300px;
  flex-direction: column;
  justify-content: space-around;
}

.noRoutes>div{
  margin: 10px;
}

.noRoutes>div:nth-child(1){
  animation: zoom 3s infinite;
}


@-webkit-keyframes zoom {
    from {transform: scale3d(0.85, 0.85, 0.85);}
    to {transform: scale3d(1.2, 1.2, 1.2);}
}

@keyframes zoom {
    from {transform: scale3d(0.85, 0.85, 0.85);}
    to {transform: scale3d(1.1, 1.1, 1.1);}
}

.cardActionGroup{
  display: flex;
  justify-content: space-around;
}