.gate-list
    margin-top: .5rem
    .gate-head
        & *
            font-weight: 500
            font-size: 1.4rem
            color: #777

    .gates
        width: 100%

.gate
    margin-top: 1.5rem
    box-shadow: 0 .5rem .9rem 0 transparentize($black, .9)
    padding: 1rem 0
    display: flex
    align-items: center
    background: $white
    transition: background .2s
    position: relative
    height: 6rem

    &.active
        background: lighten($blue, 41%)

.gate-icons
    width: 20%
    display: flex
    justify-content: space-evenly
    position: relative
.gate-name
    width: 20%
.gate-capacity
    display: flex
    align-items: center
    justify-content: flex-start
    width: 20%
.gate-type
    width: 40%
    display: flex
    align-items: center

// containers
.container-list
    margin-top: .5rem
    .container-head
        & *
            font-weight: 500
            font-size: 1.4rem
            color: #777

    .containers
        width: 100%
.container-row
    margin-top: 1.5rem
    box-shadow: 0 .5rem .9rem 0 transparentize($black, .9)
    padding: 1rem 0
    display: flex
    align-items: center
    background: $white
    transition: background .2s
    position: relative

    &.active
        background: lighten($blue, 41%)

.container-icons
    width: 20%
    display: flex
    justify-content: space-evenly
    position: relative

.container-name
    width: 30%

.container-loading
    width: 50%
    display: flex
    align-items: center
    justify-content: flex-start