/* ==========================================================================
   App Content
   ========================================================================== */


/* General
   ========================================================================== */
.app__content {
    position: relative;
    background: $white;

    border: 1px solid $gray-lighter;
    border-top-color: $white;
    border-right-color: $white;
    border-left-color: $white;

    min-height: calc(100vh - 95px);

    .table-responsive {
        margin-top: 2rem;
    }

    @media (min-width: $screen-md) {
        border-left-color: $gray-lighter;
    }
}


/* Header
   ========================================================================== */
// General
.app__content__header {
    margin-top: 1rem;
    padding: 0 0 1em 0;

    border-bottom: 1px solid $gray-lighter;
}

.app__content__header--with-margin {
    margin-bottom: 2rem;
}


// Title
.app__content__header__title {
    margin-top: 0;
    margin-bottom: 0;

    abbr {
        border-bottom: 0;
    }
}

.app__content__header__title__small {
    font-size: .5em;
    color: $gray-light;

    @media (max-width: $screen-lg) {
        display: block;
        line-height: 1.4;
    }
}

// Page status indicators
.app__content__header__title__small--online,
.app__content__header__title__small--offline {
    position: relative;

    display: block;
    padding-left: 2rem;
    margin-top: .6rem;

    &:before {
        content: ' ';

        position: absolute;
        top: 50%;
        left: .2rem;

        display: inline-block;
        width: .8rem;
        height: .8rem;
        margin: -.4rem 0 0;

        border-radius: 100%;
        border: 1px solid;
    }

    @media (min-width: $screen-sm-min) {
        display: inline-block;
        padding-left: 2.5rem;
        margin-top: 0;

        &:before {
            left: 1rem;
        }
    }
}

.app__content__header__title__small--online {

    &:before {
        background: #29CE6B;
        border-color: darken(#29CE6B, 7);
    }
}

.app__content__header__title__small--offline {

    &:before {
        background: #D5412A;
        border-color: darken(#D5412A, 7);
    }
}


// Actions
.app__content__header__extra-actions {
    margin-top: 1rem;

    text-align: right;
}


/* Breadcrumb
   ========================================================================== */
.app__content__breadcrumb {
    padding: 0 0 0 3em;
}

.app__main--no-sidebar {

    .app__content__breadcrumb {
        padding-left: 0;
    }
}