@-webkit-keyframes fadeSmooth {
    from {
        opacity: 0;
        left: -60px;
    }

    to {
        opacity: 1;
        left: -87px;
    }
}
@keyframes fadeSmooth {
    from {
        opacity: 0;
        left: -60px;
    }

    to {
        opacity: 1;
        left: -87px;
    }
}
                                   
.fadeIn {
}


.table-routes {
  // Make pseudo links
  td {
    color: #337ab7;
    text-decoration: none;

    span:hover {
      text-decoration: underline;
    }

    span {
        cursor: pointer;
    }

  }

  .noexport-reason,
  .reject-reason {
    font-size: 90%;
    color: #333;
    margin-bottom: 1px;

    a {
      color: #aa0000;
    }
  }


  .primary-route {
    position: relative;
    
    color: #555;
    width: 1.5ex;
    display: inline-block;
    text-decoration: none;
    border: none;

    div {
        display: none;
        top: -5px;
        left: -87px;
        background: rgba(0, 0, 0, 0.45);
        color: white;
        position: absolute;
        padding: 5px;
        border-radius: 3px;
        font-weight: bold;

        -webkit-animation-name: fadeSmooth;
        animation-name: fadeSmooth;
    }

    &:hover {
        div {
            display: block;

            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
    }
  }

  .route-network {
    display: inline-block;
    white-space: nowrap;
  }
}


.table-protocols {
  .date-since {
    white-space: nowrap;
  }
  background: white;
}


.routes-loading.card {
    p {
        font-family: monospace;
        font-size: 12px;
    }
}

.routes-header-container {
    text-decoration: none;

    a:hover {
        text-decoration: none;
    }
}


.routes-quick-links {
    margin-bottom: 0.75em; 
    margin-top: -0.5em;

    text-align: right;
    span {
      color: #888;
    }

    ul {
        padding: 0px;
        margin: 0px;
        display: inline-block;
    }
    li {
        display: inline-block;
        padding: 0px 4px;
        margin: 0px 0px 0px 8px;
        background: white;
        border-radius: 3px;

        &.filtered a {
          color: orange;
        }

        &.received a {
          color: green;
        }

        &.not-exported a {
          color: red;
        }
    }

}