#file-manager {

    /*
      We're using CSS transitions for when
      the enter and move events are triggered
      for the element that has the tr
      class
    */
    tr.ng-enter, tr.ng-move {
        transition: all 0.5s linear;
        opacity: 0;
        // background: yellow;
    }

    /*
     The ng-enter-active and ng-move-active
     are where the transition destination properties
     are set so that the animation knows what to
     animate.
    */
    tr.ng-enter.ng-enter-active,
    tr.ng-move.ng-move-active {
        // opacity: 1;
        animation: 0.5s greenShow;
    }

    /*
      We're using CSS keyframe animations for when
      the leave event is triggered for the element
      that has the tr class
    */
    tr.ng-leave {
        animation: 0.8s fadeOut;
        background: #e79c9c;
    }

    .list-view {

        .options {
            width: 80px;
            min-width: 80px;
        }

        tr {

            th, td {

            }
        }

        > thead {

            tr {

                th {

                    &:first-child {
                        border-bottom: none;
                        width: 106px;
                    }
                    cursor: pointer;
                }
            }
        }

        > tbody {

            tr {
                cursor: pointer;
                outline: none;

                &.selected {
                    background: #E3F2FD;
                }

                td {
                    padding: 24px 8px;
                    border-bottom: none;

                    &.file-icon {
                        padding: 24px;
                        text-align: center;
                    }

                    &.name {
                        font-weight: 500;
                    }

                    &.type {
                        text-transform: capitalize;
                    }

                    &.owner {
                        text-transform: capitalize;
                    }

                    &.last-modified {

                    }

                    &.show-details {
                        text-align: center;
                    }

                    &.more {
                        padding: 24px 16px;
                        text-align: center;
                    }

                    a {
                        color: rgba(0,0,0,0.87);

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

                    md-checkbox {
                        width: 20px;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}