.mdl-textfield__input{
  color: #8b9c9e;
}
.mdl-textfield__label{
  color: #8b9c9e;
}
.next{
  width: 50px;
}
.previous{
  width: 50px;
}

.active{
  border-left: 10px solid #00a887;
  color: #00a887 !important;
  padding-left: 30px !important; 
}
.menu{
  color: #757575; 
  text-decoration: none;
}
.menu_active{
  color: #00a887 !important; 
  text-decoration: none;
}
.page-content{
  background-color: #f8f8f8;
}
.line{
  border-top: 10px solid #f7a800;
}
main{
  background-color: #f8f8f8;
}

.my-svg-container{
  display: inline-block;
  position: relative;
  width: 50%;
  padding-bottom: 60%; /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
  
  vertical-align: middle; /* top | middle | bottom ... do what you want */
 }
 
 
 .my-svg{ /* svg into : object, img or inline */
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%; /* only required for <img /> */
 }