* {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

h1 {
  color: #009688; }

.secondary {
  color: #7f7f7f; }

.clickable {
  cursor: pointer; }

md-card {
  box-sizing: border-box;
  margin: 0 16px 16px 16px; }

.full-width {
  width: 100%; }

md-content {
  background-color: #f4f4f4; }

.primary-back-color {
  background-color: #009688; }

.primary-color {
  color: #009688; }

.accent-back-color {
  background-color: #9c27b0; }

.accent-color {
  color: #9c27b0; }

.md-tab-body {
  padding-top: 16px; }

.modal {
  position: absolute;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  /*
    width: 100%;
    height: 100%;
    */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */ }

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  border: 1px solid #888;
  animation-name: animatetop;
  animation-duration: 0.4s; }

.popup {
  position: absolute;
  /* Stay in place */
  z-index: 2;
  /* Sit on top */
  padding-top: 25px;
  /* Location of the box */
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  /*
    width: 100%;
    height: 100%;
    */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */ }

/* Modal Content */
.popup-content {
  background-color: #fefede;
  margin: auto;
  border: 1px solid #888;
  animation-name: animatetop;
  animation-duration: 0.4s; }

@media (max-width: 600px) {
  md-card {
    padding: 24px !important; } }

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 743px) {
  .modal-content {
    width: 96%; }
  .modal-content.medium {
    width: 96%; }
  .modal-content.small {
    width: 96%; }
  .popup-content {
    width: 92%; }
  .popup-content.medium {
    width: 92%; }
  .popup-content.small {
    width: 92%; }
  md-card {
    width: 92vw; } }

@media only screen and (min-width: 744px) and (max-width: 863px) {
  .modal-content {
    width: 76%; }
  .modal-content.medium {
    width: 60%; }
  .modal-content.small {
    width: 460px; }
  .popup-content {
    width: 90%; }
  .popup-content.medium {
    width: 70%; }
  .popup-content.small {
    width: 420px; }
  md-card {
    width: 340px; } }

@media only screen and (min-width: 864px) {
  .modal-content {
    width: 76%; }
  .modal-content.medium {
    width: 60%; }
  .modal-content.small {
    width: 460px; }
  .popup-content {
    width: 90%; }
  .popup-content.medium {
    width: 70%; }
  .popup-content.small {
    width: 420px; }
  md-card {
    width: 388px; } }

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0; }
  to {
    top: 0;
    opacity: 1; } }