/** Office sections
 * (main layout css-classes)
 * -----------------------------------------------------------------------------
 *  .office {
 *      .top-bar {
 *          .breadcrumb
 *          .admin
 *      }
 *      .side-bar {
 *          .search
 *          .categories
 *      }
 *      .content
 *  }
 * -----------------------------------------------------------------------------
 */


/* Variables
 * ----------------------------------------------------------------------------
 */

:root {
    --class-blue: #337ab7;
    --class-blue-opaque: #337ab799;
    --class-blue-dark: #082e44;
    --class-orange: #f47920;
    --class-orange-opaque: #f4792099;
    --class-grey-background: #eeedeb;
    --class-red: #d13;
    --light-grey-bgr: #f2f3f8;
}



/* main layout classes
 * ----------------------------------------------------------------------------
 */

.office .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #ddd;
    box-shadow: 1px 1px 7px #9997;
    background: var(--light-grey-bgr);
}

.office .top-bar .fa,  
.office .top-bar .fas {
    width: 32px;
    text-align: center;
}


.office .main-content {
    padding: 1.5em;
    max-width: 1440px;
    min-height: calc(100vh - 345px);
}

.office .page-container { max-width: 1024px; }